import { useBoolean } from "usehooks-ts";

import FormTextAreaInput from "@/components/form/components/basic/form-textarea-input";
import Card from "@/components/ui/card/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible/collapsible";
import LIcon from "@/components/ui/lucid-icon/lucid-icon";
import { cn } from "@/libs/utils";

interface CoreSummaryNoteFormItemProps {
  placeholder: string;
  title: string;
  name: string;
  className?: string;
  titleClassName?: string;
  open?: boolean;
  hasMessage?: boolean;
}

const CoreSummaryNoteFormItem = (props: CoreSummaryNoteFormItemProps) => {
  const collapseBoolean = useBoolean(props?.open || false);
  return (
    <Card className={props.className}>
      <Collapsible
        open={collapseBoolean.value}
        onOpenChange={collapseBoolean.setValue}
      >
        <CollapsibleTrigger
          className={cn(
            "flex w-full justify-between  text-sm font-semibold",
            props.titleClassName,
          )}
        >
          {props.title}
          <LIcon
            name={collapseBoolean.value ? "ChevronUp" : "ChevronDown"}
            size={18}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className="mt-4">
          <FormTextAreaInput
            name={props.name}
            placeholder={props.placeholder}
            maxLength={100}
            rules={{
              maxLength: {
                value: 150,
                message: "En fazla 100 karakter girebilirsiniz",
              },
            }}
          />
        </CollapsibleContent>
      </Collapsible>
      {props.hasMessage && (
        <span className="mt-4 text-sm text-gray-500">
          İleteceğiniz talepleriniz, tesisin uygunluğuna göre işleme
          alınacaktır.
        </span>
      )}
    </Card>
  );
};

export default CoreSummaryNoteFormItem;