import { IMAGE_ROOT } from "@/shared/constants/common";
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CalendarType, HeaderType } from '@/entities/common/model/types';
import { 
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode,
  useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useState } from "react";
import { useExtensionPayoutRequestMutation } from "@/entities/additional-service/api/payout/use-extension-payout-request-mutation";
import { ExtensionPayoutRequestParams, ExtensionPayoutRequestResponse } from "@/entities/additional-service/model/payout/types";
import NiceCalendar from "@/shared/ui/calendar/nice-calendar";

export const PayoutRequestPage = () => {
  const { navigate } = useNavigate();

  const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
  const [mid, setMid] = useState<string>('nictest001m')
  const [submallId, setSubmallId] = useState<string>('');
  const [disbursementAmount, setDisbursementAmount] = useState<number>(0);
  const [settlementDate, setSettlementDate] = useState<string>('');

  const { mutateAsync: extensionPayoutRequest } = useExtensionPayoutRequestMutation();
  
  useSetHeaderTitle('지급대행 신청');
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);
  useSetOnBack(() => {
    navigate(PATHS.additionalService.payout.list);
  });

  const callExtensionPayoutRequest = () => {
    let params: ExtensionPayoutRequestParams = {
      mid: mid,
      submallId: submallId,
      disbursementAmount: disbursementAmount,
      settlementDate: settlementDate,
    };
    extensionPayoutRequest(params).then((rs: ExtensionPayoutRequestResponse) => {
      navigate(PATHS.additionalService.payout.list);
    });
  };

  const setNewDate = (date: string) => {
    setSettlementDate(date);
    setCalendarOpen(false);
  };
  const onClickToOpenCalendar = () => {
    setCalendarOpen(true);
  };
  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="ing-list">
              <div className="billing-form gap-30">
                <div className="billing-row">
                  <div className="billing-label">서브ID</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ submallId }
                      onChange={ (e) => setSubmallId(e.target.value) }
                    />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">지급액</div>
                  <div className="billing-field">
                    <input 
                      type="text" 
                      value={ disbursementAmount }
                      onChange={ (e) => setDisbursementAmount(parseInt(e.target.value)) }
                     />
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">지급일</div>
                  <div className="billing-field">
                    <div className="input-wrapper date">
                      <input 
                        className="date-input"
                        type="text" 
                        placeholder="날짜 선택" 
                        value={ settlementDate }
                      />
                      <button 
                        className="date-btn"
                        type="button"
                        onClick={ () => onClickToOpenCalendar() }
                      >
                        <img
                          src={ IMAGE_ROOT + '/ico_date.svg' }
                          alt="날짜 선택"
                        />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <div className="apply-row">
        <button 
          className="btn-50 btn-blue flex-1"
          onClick={ callExtensionPayoutRequest }
        >신청</button>
      </div>
      <NiceCalendar
        calendarOpen={ calendarOpen }
        setCalendarOpen={ setCalendarOpen }
        calendarType={ CalendarType.Single }
        setNewDate={ setNewDate }
      ></NiceCalendar>
    </>
  );
};