import moment from 'moment';
import { NumericFormat } from 'react-number-format';
import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useHomeTodayMutation } from '../api/use-home-today-mutation';
import { 
  HomeTodayParams,
  HomeTodayResponse,
  Sales,
  Settlement
} from '../model/types';
import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths';

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

  const [mid, setMid] = useState<string>('nictest001m');
  const [searchDate, setSearchDate] = useState<string>(moment().format('YYYY-MM-DD'));

  const [sales, setSales] = useState<Sales>();
  const [settlement, setSettlement] = useState<Settlement>();
  const [increaseRate, setIncreaseRate] = useState<number>();
  const [availableLimit, setAvailableLimit] = useState<number>();

  const { mutateAsync: homeToday } = useHomeTodayMutation();
  
  const callToday = () => {
    let params: HomeTodayParams = {
      searchDate: searchDate,
      mid: mid,
    };
    homeToday(params).then((rs: HomeTodayResponse) => {
      setSales(rs.sales);

      let yesterdayTotalAmount = rs.sales.yesterdayTotalAmount;
      let todayTotalAmount = rs.sales.todayTotalAmount;
      if(todayTotalAmount && yesterdayTotalAmount){
        let rate = ((todayTotalAmount / yesterdayTotalAmount) - 1) * 100;
        let roundRate = Math.round(rate * 10) / 10;
        setIncreaseRate(roundRate);
      }

      let totalCreditLimit = rs.settlement.totalCreditLimit;
      let availableCredit = rs.settlement.availableCredit;
      if(totalCreditLimit && availableCredit){
        let rate = (availableCredit / totalCreditLimit) * 100;
        let roundRate = Math.round(rate * 10) / 10;
        setAvailableLimit(roundRate);
      }      
      
      setSettlement(rs.settlement);
    });
  };

  const onClickToNavigate = () => {
    navigate(PATHS.settlement.list);
  };
    
  useEffect(() => {
    callToday();
  }, []);
  
  return (
    <>
      <div className="box-wrap">
        <h3>오늘 매출</h3>
        <div className="today-sales">
          <span className="won01">
            <NumericFormat
              value={ sales?.todayTotalAmount }
              thousandSeparator
              displayType="text"
              suffix='원'
            ></NumericFormat>
          </span>
          <span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
            <NumericFormat
              value={ increaseRate }
              thousandSeparator
              displayType="text"
              prefix={ `${(increaseRate && increaseRate >= 0)? '↑ ': '↓ '}` }
              suffix='%'
            ></NumericFormat>
          </span>
          <a className="arrow">
            <img 
              src={ IMAGE_ROOT + '/ico_arrow.svg' } 
              alt="오늘 매출 바로가기"
              onClick={ onClickToNavigate }
            />
          </a>
        </div>
        <ul className="dales-detail">
          <li className="approve">
            승인 건수 
            <strong style={{marginLeft: '4px'}}>
              <NumericFormat
                value={ sales?.totalCount }
                thousandSeparator
                displayType="text"
                suffix='건'
              ></NumericFormat>
            </strong>
          </li>
          <li className="cancel">
            취소 건수 
            <strong style={{marginLeft: '4px'}}>
              <NumericFormat
                value={ sales?.cancelCount }
                thousandSeparator
                displayType="text"
                suffix='건'
              ></NumericFormat>
            </strong>
          </li>
        </ul>
      </div>
      <div className="box-wrap">
        <h3>오늘 정산</h3>
        <div className="today-sales">
          <span className="won02">
            <NumericFormat
              value={ settlement?.todaySettlementAmount }
              thousandSeparator
              displayType="text"
              suffix='원'
            ></NumericFormat>
          </span>
          <span className="per">입금완료</span>
          <a className="arrow">
            <img 
              src={ IMAGE_ROOT + '/ico_arrow.svg' } 
              alt="오늘 매출 바로가기"
              onClick={ onClickToNavigate }
            />
          </a>
        </div>
        <div className="progressbar">
          <div className="progress-header">
            <span className="progress-title">정산한도</span>
            <span className="progress-remaining">
              <NumericFormat
                value={ availableLimit }
                thousandSeparator
                displayType="text"
                suffix='% 남음'
              ></NumericFormat>
            </span>
          </div>
          <div className="progress-container">
            <div className="progress-bar">
              <div className="progress-fill" style={{width: (100 - (availableLimit || 0)) +'px' }}></div>
            </div>
          </div>
          <div className="remain-limit">
            <span>잔여정산한도</span>
            <strong style={{marginLeft: '4px'}}>
              <NumericFormat
                value={ settlement?.availableCredit }
                thousandSeparator
                displayType="text"
                suffix='원'
              ></NumericFormat>
            </strong>
          </div>
        </div>
      </div>
    </>
  );
};
