import moment from 'moment';
import { useState } from 'react';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterSelect } from '@/shared/ui/filter/select';
import { ReferenceRequestSuccess } from './reference-request-success';
import { ReferenceRequestFail } from './reference-request-fail';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { VatReturnTaxBtnGroups } from '../model/contant';
import { VatReturnPayTax } from '../model/types';

export const ReferenceWrap = () => {

  const [success, setSuccess] = useState<boolean>(false);

  const [successPageOn, setSuccessPageOn] = useState<boolean>(false);
  const [failPageOn, setFailPageOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>('nictest00m');
  const [startDate, setStartDate] = useState<string>(moment().format('YYYY.MM.DD'));
  const [endDate, setEndDate] = useState<string>(moment().format('YYYY.MM.DD'));
  const [payTax, setPayTax] = useState<VatReturnPayTax>(VatReturnPayTax.Tax);
  const [email, setEmail] = useState<string>('');

  let MidOptions = [
    {name: 'nictest001m', value: 'nictest001m'}
  ];

  let EmailOptions = [
    {name: 'focp212@naver.com', value: 'focp212@naver.com'}
  ];

  const onClickToResquest = () => {
    if(success){
      setSuccessPageOn(true);
    }
    else{
      setFailPageOn(true);
    }
  };

  return (
    <>
      <div className="option-list no-padding pt-30">
        <FilterSelect
          title='가맹점'
          selectValue={ mid }
          selectSetter={ setMid }
          selectOptions={ MidOptions }
        ></FilterSelect>
        <FilterButtonGroups
          title='거래 과세/면세 구분'
          activeValue={ payTax }
          btnGroups={ VatReturnTaxBtnGroups }
          setter={ setPayTax }
          addClassName='horizon'
          maxBtn={ 2 }
        ></FilterButtonGroups>
        <FilterCalendar
          title='거래기간'
          startDate={ startDate }
          endDate={ endDate }
          setStartDate={ setStartDate }
          setEndDate={ setEndDate }
        ></FilterCalendar>
        <FilterSelect
          title='수령메일주소'
          selectValue={ email }
          selectSetter={ setEmail }
          selectOptions={ EmailOptions }
        ></FilterSelect>
      </div>
      <div className="apply-row bottom-padding">
        <button 
          className="btn-50 btn-blue flex-1"
          onClick={ onClickToResquest }
        >자료신청</button>
      </div>
      <ReferenceRequestSuccess
        pageOn={ successPageOn }
        setPageOn={ setSuccessPageOn }
      ></ReferenceRequestSuccess>
      <ReferenceRequestFail
        pageOn={ failPageOn }
        setPageOn={ setFailPageOn }
      ></ReferenceRequestFail>
    </>
  )
};