Rating

from decimal import Decimal
from typing import Any

import citry_ui
from citry import Component, citry
from citry_ui import CRating

citry.register_library(citry_ui)

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


class BasicRating(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, Any]:  # noqa: ARG002
        return {"python_rating": CRating(label="Python-composed rating", value=Decimal("4.0"))}

    template = """
      <section class="rating-demo-grid">
        <c-CField required>
          <c-fill name="label">Product rating</c-fill>
          <c-fill name="description">Choose one through five stars.</c-fill>
          <c-fill name="default"><c-CRating name="rating" value="3" /></c-fill>
        </c-CField>
        <article><h3>Python composition</h3>{{ python_rating }}</article>
      </section>
    """
    css = """
      :where(.rating-demo-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.25rem}
      :where(.rating-demo-grid article){display:grid;align-content:start;gap:.75rem}:where(.rating-demo-grid h3){margin:0}
    """


preview = BasicRating()
preview  # noqa: B018

from citry import Component


class RatingPrecision(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="rating-demo-stack">
        <c-CField>
          <c-fill name="label">Half-star rating</c-fill>
          <c-fill name="default"><c-CRating value="3.5" precision="0.5" /></c-fill>
        </c-CField>
        <c-CField>
          <c-fill name="label">Tenth precision</c-fill>
          <c-fill name="default"><c-CRating value="4.2" precision="0.1" /></c-fill>
        </c-CField>
      </section>
    """
    css = ":where(.rating-demo-stack){display:grid;gap:1.25rem}"


preview = RatingPrecision()
preview  # noqa: B018

from citry import Component

# ruff: noqa: E501 - Alpine expression stays readable in the public source example


class ControlledRating(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="rating-demo-stack" x-data="{score:'3',last:'No request yet'}">
        <c-CRating
          label="Controlled conversation rating"
          value="3"
          allow_clear
          $c-props="{value:score,onValueChange:(next,detail)=>{score=next;last=`${detail.source}: ${next ?? 'unrated'}`}}"
        />
        <output x-text="last">No request yet</output>
        <button type="button" @click="score='5'">Set five stars</button>
      </section>
    """
    css = ":where(.rating-demo-stack){display:grid;justify-items:start;gap:.75rem}"


preview = ControlledRating()
preview  # noqa: B018

from citry import Component

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


class RatingForms(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <form class="rating-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">Service rating</c-fill>
          <c-fill name="default"><c-CRating name="service" value="2" /></c-fill>
        </c-CField>
        <c-CRating name="published" label="Published rating" value="4.5" precision="0.5" readonly />
        <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(.rating-demo-stack){display:grid;justify-items:start;gap:1rem}"


preview = RatingForms()
preview  # noqa: B018

from citry import Component


class RatingLocales(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="rating-demo-stack">
        <c-CRating label="Catalog-backed value names" value="3.5" precision="0.5" />
        <c-CRating label="Application-owned value names" value="4" value_label="Score {value} / {max}" />
        <p>The first Rating follows its nearest client-enabled i18n provider; the explicit pattern stays fixed.</p>
      </section>
    """
    css = ":where(.rating-demo-stack){display:grid;justify-items:start;gap:1rem}"


preview = RatingLocales()
preview  # noqa: B018

from citry import Component


class RatingStates(Component):
    class Kwargs:
        pass

    class Slots:
        pass

    template = """
      <section class="rating-state-grid">
        <c-CRating label="Small subtle rating" value="2" size="sm" variant="subtle" />
        <c-CRating label="Default rating" value="3" />
        <c-CRating label="Large readonly rating" value="4.5" precision="0.5" size="lg" readonly />
        <c-CRating label="Disabled rating" value="1" disabled />
        <div dir="rtl"><c-CRating label="RTL rating" value="4" /></div>
        <c-CRating label="Brand rating" value="5" class_="rating-brand" />
      </section>
    """
    css = """
      :where(.rating-state-grid){display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.5rem;align-items:start}
      :where(.rating-brand){--cui-rating-fill-color:#059669;--cui-rating-hover-color:#10b981;--cui-rating-gap:.4rem}
    """


preview = RatingStates()
preview  # noqa: B018