DateInput

from datetime import date
from typing import Any

import citry_ui
from citry import Component, citry
from citry_ui import CDateInput

citry.register_library(citry_ui)

# ruff: noqa: E501 - template and CSS lines stay readable in public source examples


class BasicDateInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, Any]:  # noqa: ARG002
        return {"python_input": CDateInput(value=date(2026, 8, 19), attrs={"aria-label": "Python date"})}

    template = """
      <section class="date-input-demo-grid">
        <c-CField required>
          <c-fill name="label">Arrival date</c-fill>
          <c-fill name="description">Choose your check-in day.</c-fill>
          <c-fill name="default"><c-CDateInput name="arrival" /></c-fill>
        </c-CField>
        <article><h3>Python composition</h3>{{ python_input }}</article>
      </section>
    """
    css = ":where(.date-input-demo-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem}"


preview = BasicDateInput()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - template lines stay readable in the public source example


class DateInputBounds(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <c-CField required>
        <c-fill name="label">Alternating August date</c-fill>
        <c-fill name="description">Choose every second day from 1 through 31 August 2026.</c-fill>
        <c-fill name="default"><c-CDateInput name="day" value="2026-08-19" min="2026-08-01" max="2026-08-31" c-step="2" /></c-fill>
      </c-CField>
    """


preview = DateInputBounds()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - template expression remains readable as authored HTML


class DateInputForm(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <form class="date-input-demo-stack" x-data="{result:'Submit or reset the Form'}" @submit.prevent="result=JSON.stringify(Array.from(new FormData($event.target).entries()))">
        <c-CField required>
          <c-fill name="label">Departure date</c-fill>
          <c-fill name="default"><c-CDateInput name="departure" value="2026-08-22" /></c-fill>
        </c-CField>
        <c-CGroup><c-CButton type="submit">Submit</c-CButton><c-CButton type="reset" variant="outline">Reset</c-CButton></c-CGroup>
        <output x-text="result">Submit or reset the Form</output>
      </form>
    """
    css = ":where(.date-input-demo-stack){display:grid;justify-items:start;gap:1rem}"


preview = DateInputForm()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - Alpine expressions stay readable in the public source example


class ControlledDateInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="date-input-demo-stack" x-data="{day:'2026-08-19',last:'No native input yet'}">
        <c-CDateInput c-attrs="{'aria-label':'Controlled arrival date'}" value="2026-08-19" $c-props="{value:day}" @input="last=$event.currentTarget.value" />
        <c-CGroup><button type="button" @click="day='2026-08-22'">Set 22 August</button><button type="button" @click="day=null">Clear</button></c-CGroup>
        <output x-text="last">No native input yet</output>
      </section>
    """
    css = ":where(.date-input-demo-stack){display:grid;justify-items:start;gap:.75rem}"


preview = ControlledDateInput()
preview  # noqa: B018

from citry import Component


class BirthdayDateInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <c-CField>
        <c-fill name="label">Date of birth</c-fill>
        <c-fill name="description">Your browser may offer saved birthday information.</c-fill>
        <c-fill name="default"><c-CDateInput name="birthday" autocomplete="bday" max="2026-08-19" /></c-fill>
      </c-CField>
    """


preview = BirthdayDateInput()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - localized template and CSS lines stay readable in the public source example


class DateInputLocales(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="date-input-demo-grid">
        <div lang="en"><label for="date-en">English context</label><c-CDateInput id="date-en" value="2026-08-19" /></div>
        <div lang="ar" dir="rtl"><label for="date-ar">سياق عربي</label><c-CDateInput id="date-ar" value="2026-08-19" /></div>
        <p>The submitted value is 2026-08-19 in both controls; visible native formatting remains browser-owned.</p>
      </section>
    """
    css = ":where(.date-input-demo-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem}:where(.date-input-demo-grid>div){display:grid;gap:.5rem}"


preview = DateInputLocales()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - template and CSS lines stay readable in the public source example


class DateInputStates(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="date-input-state-grid">
        <c-CDateInput c-attrs="{'aria-label':'Small outlined date'}" value="2026-08-19" size="sm" />
        <c-CDateInput c-attrs="{'aria-label':'Filled date'}" value="2026-08-20" variant="filled" />
        <c-CDateInput c-attrs="{'aria-label':'Large plain date'}" value="2026-08-21" size="lg" variant="plain" />
        <c-CDateInput c-attrs="{'aria-label':'Readonly date'}" value="2026-08-22" readonly />
        <c-CDateInput c-attrs="{'aria-label':'Disabled date'}" value="2026-08-23" disabled />
        <c-CDateInput c-attrs="{'aria-label':'Invalid date'}" value="2026-08-24" invalid />
      </section>
    """
    css = ":where(.date-input-state-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem}"


preview = DateInputStates()
preview  # noqa: B018

from citry import Component


class StyledDateInput(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = (
        '<c-CDateInput c-attrs="{\'aria-label\':\'Brand date\'}" value="2026-08-19" class_="brand-date-input" />'
    )
    css = """
      :where(.brand-date-input){--cui-date-input-background:light-dark(#f0fdf4,#14261d);--cui-date-input-border-color:#16a34a;--cui-date-input-focus-color:#15803d;--cui-date-input-radius:1rem}
    """


preview = StyledDateInput()
preview  # noqa: B018