TimePicker

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class BasicTimePicker(Component):
    template = """
      <c-CField required>
        <c-fill name="label">Appointment time</c-fill>
        <c-fill name="description">Choose a fifteen-minute slot.</c-fill>
        <c-fill name="default"><c-CTimePicker name="appointment" min="09:00" max="12:00" value="09:30" /></c-fill>
      </c-CField>
    """


preview = BasicTimePicker()
preview  # noqa: B018

from datetime import time
from typing import Any

import citry_ui
from citry import Component, citry
from citry_ui import CTimePicker

citry.register_library(citry_ui)


class TimePickerOptions(Component):
    def template_data(self, kwargs, slots) -> dict[str, Any]:  # noqa: ANN001, ARG002
        return {
            "picker": CTimePicker(
                name="departure", value=time(23, 5, 9), options=(time(23, 5, 9), "00:00:10", "12:30:45")
            )
        }

    template = """
      <section>
        <h3>Irregular second-precision departures</h3>
        {{ picker }}
      </section>
    """


preview = TimePickerOptions()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

# ruff: noqa: E501 - embedded Citry templates remain readable

citry.register_library(citry_ui)


class TimePickerForm(Component):
    template = """
      <form x-data="{result:'Submit to inspect FormData'}" @submit.prevent="result=JSON.stringify(Object.fromEntries(new FormData($event.target)))">
        <c-CField required>
          <c-fill name="label">Start time</c-fill>
          <c-fill name="default"><c-CTimePicker name="start" min="08:00" max="10:00" value="09:00" /></c-fill>
        </c-CField>
        <c-CButton type="submit">Submit</c-CButton>
        <c-CButton type="reset" variant="outline">Reset</c-CButton>
        <output x-text="result">Submit to inspect FormData</output>
      </form>
    """


preview = TimePickerForm()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

# ruff: noqa: E501 - embedded Citry templates remain readable

citry.register_library(citry_ui)


class ControlledTimePicker(Component):
    template = """
      <section x-data="{value:'09:30',open:false,last:'No request yet'}" style="display:grid;gap:.75rem;max-width:24rem">
        <c-CTimePicker min="09:00" max="11:00" $c-props="{value,open,onValueChange:(next,detail)=>{last=`${detail.source}: ${next}`;value=next},onOpenChange:(next)=>open=next}" />
        <output x-text="last">No request yet</output>
      </section>
    """


preview = ControlledTimePicker()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class LocalizedTimePicker(Component):
    template = """
      <c-i18n tag="section" client>
        <div style="display:flex;gap:.5rem;margin-block-end:1rem">
          <c-CButton type="button" @click="$i18n.switchLocale('en-US')">English</c-CButton>
          <c-CButton type="button" @click="$i18n.switchLocale('cs-CZ')">Čeština</c-CButton>
        </div>
        <c-CTimePicker value="14:30" min="13:00" max="16:00" />
      </c-i18n>
    """


preview = LocalizedTimePicker()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class TimePickerStates(Component):
    template = """
      <section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem">
        <c-CTimePicker value="09:00" min="08:00" max="12:00" />
        <c-CTimePicker value="10:15" min="08:00" max="12:00" variant="filled" size="sm" />
        <c-CTimePicker value="11:30" min="08:00" max="12:00" variant="plain" size="lg" readonly />
        <c-CTimePicker value="12:00" min="08:00" max="12:00" invalid />
        <c-CTimePicker value="08:30" min="08:00" max="12:00" disabled />
      </section>
    """


preview = TimePickerStates()
preview  # noqa: B018