"use client";

import React from "react";
import ComponentCard from "@/components/common/ComponentCard2";
import WithLabel from "@/components/form/WithLabel";
import Input from "@/components/form/input/InputField2";
import Button from "@/components/ui/button/Button2";
import { FileIcon } from "@/icons";

interface BizGroupPanelProps {
  name: string;
  bizRegNum: string;
  onChangeName: (value: string) => void;
  onChangeBizRegNum: (value: string) => void;
  onClickSearch: () => void;
  onClickManage?: () => void;
  isDisabled?: boolean;
  isOpen?: boolean;
  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
  title?: string;
  treeContainerClassName?: string;
  searchLabelWidth?: number;
  children: React.ReactNode;
}

export default function BizGroupPanel({
  name,
  bizRegNum,
  onChangeName,
  onChangeBizRegNum,
  onClickSearch,
  onClickManage,
  isDisabled = false,
  isOpen,
  setOpen,
  title = "사업자 그룹별로 관리",
  treeContainerClassName = "h-[100px] overflow-auto",
  searchLabelWidth = 24,
  children,
}: BizGroupPanelProps) {
  return (
    <ComponentCard
      title={title}
      titleIcon={<FileIcon />}
      isOpen={isOpen}
      setOpen={setOpen}
    >
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <ComponentCard>
          <div className="flex-1 space-y-6">
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
              <WithLabel label="그룹명(사업자명)" label_width={searchLabelWidth}>
                <Input
                  type="text"
                  placeholder="조회할 그룹명(사업자명) 입력하세요."
                  value={name}
                  onChange={(e) => onChangeName(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") onClickSearch();
                  }}
                />
              </WithLabel>
              <WithLabel label="사업자번호" label_width={searchLabelWidth}>
                <Input
                  type="text"
                  placeholder="조회할 사업자번호를 입력하세요."
                  value={bizRegNum}
                  onChange={(e) => onChangeBizRegNum(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") onClickSearch();
                  }}
                />
              </WithLabel>
            </div>
            <div className="flex items-center justify-end gap-5">
              {onClickManage && (
                <Button
                  size="sm"
                  variant="outline"
                  onClick={onClickManage}
                  disabled={isDisabled}
                >
                  조직 계층도 관리
                </Button>
              )}
              <Button
                size="sm"
                variant="primary"
                onClick={onClickSearch}
                disabled={isDisabled}
              >
                사업자 조회
              </Button>
            </div>
          </div>
        </ComponentCard>

        <ComponentCard>
          <div className={treeContainerClassName}>{children}</div>
        </ComponentCard>
      </div>
    </ComponentCard>
  );
}
