import React, { PropsWithChildren, useEffect, useState } from "react";
import Button from "../Button";
import { Caret } from "../Icon";
import Text from "../Text";
import { ICollapseProps } from "./Collapse.types";

const Collapse = ({
  title,
  children,
  defaultCollapsed = true,
  ableToClickCollapseButton = true,
  showTitleCollapseButton = true,
  showBottomCollapseButton = true,
  titleClassName = "",
  titleClassNameOnCollapsed = "",
  headerClassName = "",
  bottomCollapseButtonClassName = "",
}: PropsWithChildren<ICollapseProps>) => {
  const [isDropdownCollapsed, setIsDropdownCollapsed] = useState<boolean>(
    defaultCollapsed
  );

  const handleDropdownCollapsed = () => {
    setIsDropdownCollapsed((dropdownState) => !dropdownState);
  };

  useEffect(() => {
    setIsDropdownCollapsed(defaultCollapsed);
  }, [defaultCollapsed]);

  return (
    <>
      <div
        className={`flex items-center justify-between ${
          ableToClickCollapseButton ? "cursor-pointer" : ""
        } ${headerClassName}`}
        onClick={() => {
          ableToClickCollapseButton && handleDropdownCollapsed();
        }}
      >
        <p
          className={`whitespace-pre-wrap ${
            isDropdownCollapsed ? titleClassNameOnCollapsed : titleClassName
          }`}
        >
          {title}
        </p>

        {showTitleCollapseButton && (
          <Caret
            direction={isDropdownCollapsed ? "down" : "up"}
            size="2.4rem"
          />
        )}
      </div>

      <div
        className={`relative overflow-hidden transition-[max-height] duration-1000 ease-in-out ${
          isDropdownCollapsed ? "max-h-0" : "max-h-[1000rem]"
        }`}
      >
        {children}

        {showBottomCollapseButton && (
          <Button
            type="outline"
            color="gray"
            radius="xl"
            className={`mb-[2rem] w-full ${bottomCollapseButtonClassName}`}
            onClick={handleDropdownCollapsed}
          >
            <Text type="B8" className="mr-[1rem] text-gray-10">
              접기
            </Text>
            <Caret direction="up" size="1.8rem" />
          </Button>
        )}
      </div>
    </>
  );
};

export default Collapse;