import { Textarea } from "@/components/ui/textarea"

const demoTags = [{ label: "Label", removeLabel: "Remove tag" }]
const demoRtlTags = [
  {
    label: "\u0645\u0644\u0635\u0642",
    removeLabel: "\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645",
  },
]

const demoTextareaProps = {
  bodyText: "Our advanced inference infrastructure provides extremely short response.",
  errorMessage: "Error message",
  label: "Label",
  message: "This is a hint text",
  optionalText: "(Optional)",
  placeholder: "Type text here",
  tagInputText: "Brando...",
}

const demoRtlTextareaProps = {
  ...demoTextareaProps,
  bodyText:
    "\u062a\u0648\u0641\u0631 \u0628\u0646\u064a\u062a\u0646\u0627 \u0627\u0644\u062a\u062d\u062a\u064a\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0644\u0625\u0633\u062a\u062f\u0644\u0627\u0644 \u0623\u0648\u0642\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0642\u0635\u064a\u0631\u0629 \u0644\u0644\u063a\u0627\u064a\u0629.",
  errorMessage: "\u0631\u0633\u0627\u0644\u0629 \u062e\u0637\u0623",
  label: "\u0645\u0644\u0635\u0642",
  message: "\u0647\u0630\u0647 \u0646\u0635 \u062a\u0644\u0645\u064a\u062d.",
  optionalText: "(\u062e\u064a\u0627\u0631\u064a)",
  tagInputText: "\u0628\u0631\u0627\u0646\u062f\u0648...",
}

export function TextareaDemo() {
  return (
    <div className="grid gap-6">
      <div className="flex flex-wrap items-start gap-6">
        <Textarea {...demoTextareaProps} />
        <Textarea {...demoTextareaProps} state="filled" />
        <Textarea {...demoTextareaProps} hasError state="placeholder" />
        <Textarea {...demoTextareaProps} state="disabled" />
      </div>

      <div className="flex flex-wrap items-start gap-6">
        <Textarea {...demoTextareaProps} type="tags" state="placeholder" />
        <Textarea
          {...demoTextareaProps}
          type="tags"
          state="filled"
          tags={demoTags}
        />
        <Textarea
          {...demoTextareaProps}
          type="tags"
          hasError
          state="filled"
          tags={demoTags}
        />
        <Textarea
          {...demoTextareaProps}
          type="tags"
          state="disabled"
          tags={demoTags}
        />
      </div>

      <div dir="rtl" className="flex flex-wrap items-start gap-6">
        <Textarea {...demoRtlTextareaProps} dir="rtl" />
        <Textarea {...demoRtlTextareaProps} dir="rtl" state="filled" />
        <Textarea {...demoRtlTextareaProps} dir="rtl" hasError state="placeholder" />
        <Textarea
          {...demoRtlTextareaProps}
          dir="rtl"
          type="tags"
          state="filled"
          tags={demoRtlTags}
        />
      </div>
    </div>
  )
}
