"use client";
import React, { useState } from "react";
import Label from '@/components/form/Label2';
import Input from '@/components/form/input/InputField2';
import CtModal from "@/components/CtModal";
import { useMultiState } from "@/hooks/useMultiState";
import api, { formatBusinessNumber, isValidBusinessNumber } from '@/lib/_AG';


export interface BizGroupModalProps {
  isModify: boolean;  // external set
  pid: string;  // external set
  //
  name: string;
  biz_reg_num: string;
  phone: string;
  email: string;
  ceo: string;
  address: string;
}

interface AddModifyBizGroupModalProps {
  multiState: ReturnType<typeof useMultiState<BizGroupModalProps>>;
  onOk: (insertedId: number) => void;
  isOpen: boolean;
  closeModal: () => void;
}

export default function AddModifyBizGroupModal({ multiState, onOk, isOpen, closeModal }: AddModifyBizGroupModalProps) {

  const handleClickAddOrModify = () => {
    if (multiState.values.name == "") {
      alert("그룹(사업자)명을 입력하셔야 합니다.");
      return;
    }
    //else if (multiState.values.biz_reg_num == "") {
    //  alert("사업자등록번호를 입력하셔야 합니다.");
    //  return;
    //}
    if (multiState.values.biz_reg_num != "" && !isValidBusinessNumber(multiState.values.biz_reg_num)) {
      if (!confirm("잘못된 형식의 사업자등록번호입니다. 그래도 등록하시겠습니까?"))
        return;
    }
    
    if (multiState.values.isModify) {
      api.post('/api/modify-biz-group.do', multiState.values).then((resp) => {
        console.log(resp);
        
        if (resp.data.errCode == 0) {
          alert("수정되었습니다.");
          onOk(-1);
        }
        else if (resp.data.errCode == -11) {
          alert("이미 존재하는 사업자번호입니다.");
        }
        else if (resp.data.errCode == -17) {
          alert("잘못된 형식의 사업자번호입니다.");
        }
        else {
          alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
        }
      })
      .catch((err) => console.error(err))
    }
    else {
      api.post('/api/add-biz-group.do', multiState.values).then((resp) => {
        console.log(resp);
        
        if (resp.data.errCode == 0) {
          alert("추가되었습니다.");
          onOk(resp.data.result.biz_group_id);
        }
        else if (resp.data.errCode == -11) {
          alert("이미 존재하는 사업자번호입니다.");
        }
        else if (resp.data.errCode == -17) {
          alert("잘못된 형식의 사업자번호입니다.");
        }
        else {
          alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
        }
      })
      .catch((err) => console.error(err))
    }
  }

  const handleChangeBizRegNum = (value: string) => {
    multiState.set("biz_reg_num", formatBusinessNumber(value));
  }
  
  return (
    // <div className="rounded-2xl border  border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
      <CtModal
        title={multiState.values.isModify ? "사업자정보 수정": "사업자 등록"}
        description={multiState.values.isModify ? "수정할 사업자원장 정보를 입력하세요." : "새로 등록할 사업자원장 정보를 입력하세요."}
        okBtnText={multiState.values.isModify ? "수정": "추가"}
        onClickOk={handleClickAddOrModify}
        isOpen={isOpen}
        closeModal={closeModal}
        className="max-w-[700px] p-6 lg:p-10"
      >
        <div>
          <Label redPoint>그룹(사업자)명</Label>
          <Input type="text" value={multiState.values.name} onChange={(e) => multiState.set("name", e.target.value)} />
        </div>
        <div>
          <Label>사업자번호</Label>
          <Input type="text" value={multiState.values.biz_reg_num} onChange={(e) => handleChangeBizRegNum(e.target.value)} />
        </div>
        <div>
          <Label>전화번호</Label>
          <Input type="text" value={multiState.values.phone} onChange={(e) => multiState.set("phone", e.target.value)} />
        </div>
        <div>
          <Label>이메일</Label>
          <Input type="text" value={multiState.values.email} onChange={(e) => multiState.set("email", e.target.value)} />
        </div>
        <div>
          <Label>대표자명</Label>
          <Input type="text" value={multiState.values.ceo} onChange={(e) => multiState.set("ceo", e.target.value)} />
        </div>
        <div>
          <Label>주소</Label>
          <Input type="text" value={multiState.values.address} onChange={(e) => multiState.set("address", e.target.value)} />
        </div>
      </CtModal>
    // </div>
  );
};