import { Input } from "@/components/ui/input"

const demoTags = [{ label: "Label" }, { label: "Label" }, { label: "Label" }]
const demoRtlTags = [
  { label: "\u0645\u0644\u0635\u0642" },
  { label: "\u0645\u0644\u0635\u0642" },
  { label: "\u0645\u0644\u0635\u0642" },
]

const demoInputProps = {
  buttonLabel: "Button",
  errorMessage: "Error message",
  inlineLeadingAddon: "https://",
  inlineTrailingAddon: ".com",
  label: "Label",
  leadingAddon: "https://",
  message: "This is a hint text",
  optionalText: "(Optional)",
  placeholder: "Placeholder",
  quantityLabel: "Quantity",
  trailingAddon: ".com",
  valueText: "Text here",
}

const demoRtlInputProps = {
  ...demoInputProps,
  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
  label: "\u0645\u0644\u0635\u0642",
  message: "\u0647\u0630\u0627 \u0646\u0635 \u062a\u0644\u0645\u064a\u062d.",
  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
  placeholder: "\u0627\u0644\u0646\u0635",
  valueText: "\u0646\u0635 \u0647\u0646\u0627",
}

export function InputDemo() {
  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-start gap-6">
        <Input {...demoInputProps} />
        <Input {...demoInputProps} state="filled" />
        <Input {...demoInputProps} state="error" />
        <Input {...demoInputProps} state="disabled" />
      </div>

      <div className="flex flex-wrap items-start gap-6">
        <Input {...demoInputProps} kind="shortcut" />
        <Input {...demoInputProps} kind="add-on" />
        <Input {...demoInputProps} kind="inline-add-on" />
        <Input {...demoInputProps} kind="tags" state="filled" tags={demoTags} />
        <Input
          {...demoInputProps}
          kind="inline-tags"
          state="filled"
          tags={demoTags}
        />
      </div>

      <div className="flex flex-wrap items-start gap-6">
        <Input {...demoInputProps} kind="leading-dropdown" />
        <Input {...demoInputProps} kind="trailing-dropdown" />
        <Input {...demoInputProps} kind="leading-button" />
        <Input {...demoInputProps} kind="trailing-button" />
        <Input {...demoInputProps} kind="quantity" state="filled" valueText="1" />
        <Input {...demoInputProps} kind="quantity-2" state="filled" valueText="1" />
      </div>

      <div className="flex flex-wrap items-start gap-6">
        <Input {...demoInputProps} size="md" />
        <Input {...demoInputProps} size="md" variant="soft" />
        <Input {...demoInputProps} size="md" variant="soft" state="error" />
      </div>

      <div dir="rtl" className="flex flex-wrap items-start gap-6">
        <Input {...demoRtlInputProps} dir="rtl" />
        <Input {...demoRtlInputProps} dir="rtl" state="filled" />
        <Input {...demoRtlInputProps} dir="rtl" state="error" />
        <Input
          {...demoRtlInputProps}
          dir="rtl"
          kind="inline-tags"
          state="filled"
          tags={demoRtlTags}
        />
      </div>
    </div>
  )
}
