import { useState } from "react";
import { useTranslation } from "react-i18next";
import InputCheckbox from "./InputCheckbox";
import InputDate from "./InputDate";
import InputNumber from "./InputNumber";
import InputRadioGroup from "./InputRadioGroup";
import InputSelect from "./InputSelect";
import InputSelector from "./InputSelector";
import InputText from "./InputText";

export default function PreviewInputs() {
  const { t } = useTranslation();
  const [selectedOption, setSelectedOption] = useState<string | number | undefined>("");
  const sampleOptions = [
    { value: "1", name: t("components.previewInputs.options.option1") },
    { value: "2", name: t("components.previewInputs.options.option2") },
  ];
  return (
    <div id="inputs" className="space-y-6">
      <div className="space-y-1">
        <h3 className="text-sm font-medium">{t("components.previewInputs.sections.text")}</h3>
        <div id="text" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
          <InputText name="input-text" title={t("components.previewInputs.examples.inputTextSimple")} defaultValue={undefined} />
          <InputText name="input-text" title={t("components.previewInputs.examples.inputTextWithHint")} hint={<div>{t("components.previewInputs.hint")}</div>} defaultValue={undefined} />
          <InputText name="input-text" title={t("components.previewInputs.examples.inputTextWithHelp")} help={t("components.previewInputs.help")} defaultValue={undefined} />
        </div>
      </div>

      <div className="space-y-1">
        <h3 className="text-sm font-medium">{t("components.previewInputs.sections.number")}</h3>
        <div id="number" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
          <InputNumber name="input-number" title={t("components.previewInputs.examples.inputNumberSimple")} defaultValue={undefined} />
          <InputNumber name="input-number-with-help" title={t("components.previewInputs.examples.inputNumberWithHint")} hint={<div>{t("components.previewInputs.hint")}</div>} defaultValue={undefined} />
          <InputNumber name="input-number-with-help" title={t("components.previewInputs.examples.inputNumberWithHelp")} help={t("components.previewInputs.help")} defaultValue={undefined} />
        </div>
      </div>

      <div className="space-y-1">
        <h3 className="text-sm font-medium">{t("components.previewInputs.sections.select")}</h3>
        <div id="select" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
          <InputSelect name="input-select" title={t("components.previewInputs.examples.simple")} options={sampleOptions} value={2} />

          <InputSelect name="input-select" title={t("components.previewInputs.examples.simple")} options={sampleOptions} value={2} />

          <div>
            <InputSelector name="input-selector" title={t("components.previewInputs.examples.custom")} options={sampleOptions} />
          </div>
        </div>
      </div>

      <div className="space-y-1">
        <h3 className="text-sm font-medium">{t("components.previewInputs.sections.radio")}</h3>
        <div id="radio" className=" border-border border border-dashed px-10 py-12 lg:px-64">
          <InputRadioGroup
            name="input-radio-group"
            title={t("components.previewInputs.examples.inputRadioGroup")}
            value={selectedOption}
            setValue={setSelectedOption}
            options={[
              ...sampleOptions,
              { value: "3", name: t("components.previewInputs.options.option3"), disabled: true },
            ]}
          />
        </div>
      </div>

      <div className="space-y-1">
        <h3 className="text-sm font-medium">{t("components.previewInputs.sections.checkbox")}</h3>
        <div id="checkbox" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
          <InputCheckbox name="input-check" title={t("components.previewInputs.examples.inputCheckboxSimple")} />
          <InputCheckbox name="input-check-as-toggle" title={t("components.previewInputs.examples.inputCheckboxAsToggle")} asToggle={true} />
        </div>
      </div>

      <div className="space-y-1">
        <h3 className="text-sm font-medium">{t("components.previewInputs.sections.date")}</h3>
        <div id="date" className=" border-border border border-dashed px-10 py-12 lg:px-64">
          <InputDate name="input-date" title={t("components.previewInputs.examples.inputDate")} />
        </div>
      </div>
    </div>
  );
}