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



export interface CustomerAccountModalProps {
  biz_group_name?: string;  // internal use
  biz_reg_num?: string;  // internal use
  isModify: boolean;  // external set
  gid: string;  // external set
  //
  biz_group_id: string;
  new_biz_group_id: string;
  user_id: string;
  user_pw: string;
  nick_name: string;
  email: string;
  state: string;
}


interface AddModifyCustomerAccountModalProps {
  multiState: ReturnType<typeof useMultiState<CustomerAccountModalProps>>;
  onOk: () => void;
  isOpen: boolean;
  closeModal: () => void;
}

export default function AddModifyCustomerAccountModal({ multiState, onOk, isOpen, closeModal }: AddModifyCustomerAccountModalProps) {

  const handleClickAddOrModify = () => {
    if (multiState.values.user_id == "") {
      alert("계정 아이디를 입력하셔야 합니다.");
      return;
    }
    else if (multiState.values.user_pw == "") {
      alert("계정 비밀번호를 입력하셔야 합니다.");
      return;
    }

    const { biz_group_name, biz_reg_num, ...params } = multiState.values;
    
    if (multiState.values.isModify) {
      api.post('/api/modify-account.do', params).then((resp) => {
        console.log(resp);
        
        if (resp.data.errCode == 0) {
            alert("수정되었습니다.");
            onOk();
        }
        else {
            alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
        }
      })
      .catch((err) => console.error(err))
    }
    else {
      api.post('/api/add-account.do', params).then((resp) => {
        console.log(resp);
        
        if (resp.data.errCode == 0) {
            alert("추가되었습니다.");
            onOk();
        }
        else {
            alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
        }
      })
      .catch((err) => console.error(err))
    }
  }


  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>사업자원장</Label>
          <Input type="text" value={multiState.values.biz_group_name + "(" + multiState.values.biz_reg_num + ")"} disabled />
        </div>
        <div>
          <Label redPoint>아이디</Label>
          <Input type="text" value={multiState.values.user_id} onChange={(e) => multiState.set("user_id", e.target.value)} disabled={multiState.values.isModify ? true : false} />
        </div>
        <div>
          <Label redPoint>비밀번호</Label>
          <Input type="password" value={multiState.values.user_pw} onChange={(e) => multiState.set("user_pw", e.target.value)} />
        </div>
        <div>
          <Label>닉네임</Label>
          <Input type="text" value={multiState.values.nick_name} onChange={(e) => multiState.set("nick_name", e.target.value)} />
        </div>
        <div>
          <Label>이메일</Label>
          <Input type="email" value={multiState.values.email} onChange={(e) => multiState.set("email", e.target.value)} />
        </div>
        <div>
          <Label>상태</Label>
          <Select
            placeholder="선택하세요"
            options={[
                { label: "정상", value: "1" },
                { label: "정지", value: "4" },
            ]}
            defaultValue={multiState.values.state} onChange={(value) => multiState.set("state", value)}
            className="dark:bg-dark-900" />
        </div>
      </CtModal>
    // </div>
  );
}; 