import { useEffect, useState } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { InvoiceFilter } from './invoice-filter';
import { SortOptionsBox } from './sort-options-box';
import { SortByKeys } from '../model/types';
import { InvoiceList } from './invoice-list';

export const InvoiceListWrap = () => {
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
  const [listItems, setListItems] = useState({});

  const callList = () => {
    setListItems({
      '20250601': [
        {tid: 'a1234567', pname: '와와디디', userid: 'nictest01m', idate: '20250630', kind: 'PG수수료', amount: 48125100},
        {tid: 'b34534534', pname: '와와디디', userid: 'wadizcop@m', idate: '20250630', kind: 'PG수수료', amount: 23845000},
      ]
    })
  };
  const onClickToOpenFIlter = () => {
    setFilterOn(true);
  };
  const onCliCkToSort = (sort: SortByKeys) => {
    setSortBy(sort);
  };

  useEffect(() => {
    callList();
  }, []);
  return (
    <>
      <div className="summary-section pt-30">
        <div className="credit-controls">
          <div>
            <input 
              type="text" 
              className="credit-period" 
              value="2025.06.01 ~ 2025.06.31" 
              readOnly={ true }
            />
            <button 
              className="filter-btn"
              onClick={ () => onClickToOpenFIlter() }
            >
              <img 
                src={ IMAGE_ROOT + '/ico_setting.svg' }
                alt="검색옵션"
              />
            </button>
          </div>
          <button className="download-btn">
            <img 
              src={ IMAGE_ROOT + '/ico_download.svg' }
              alt="다운로드"
            />
          </button>
        </div>
      </div>
      <div className="filter-section mt-10">
        <SortOptionsBox
          sortBy={ sortBy }
          onCliCkToSort={ onCliCkToSort }
        ></SortOptionsBox>
      </div>
      <InvoiceList 
        listItems={ listItems }
      ></InvoiceList>
      {/*
      <div className="transaction-list">
        <div className="date-group">
          <div className="date-header">25.06</div>
          
          <div className="transaction-item approved">
            <div className="transaction-status">
              <div className="status-dot blue"></div>
            </div>
            <div className="transaction-content">
              <div className="transaction-title">와와디디 (nictest01m)</div>
              <div className="transaction-details">
                <span>2025.06.30</span>
                <span className="separator">|</span>
                <span>PG수수료</span>
              </div>
            </div>
            <div className="transaction-amount">48,125,100원</div>
          </div>
          
          <div className="transaction-item refund">
            <div className="transaction-status">
              <div className="status-dot gray"></div>
            </div>
            <div className="transaction-content">
              <div className="transaction-title">와와디디 (wadizcop@m)</div>
              <div className="transaction-details">
                <span>2025.06.30</span>
                <span className="separator">|</span>
                <span>PG수수료</span>
              </div>
            </div>
            <div className="transaction-amount">23,845,000원</div>
          </div>
         
        </div>
      </div>
       */
      }
      <div className="apply-row bottom-padding">
        <button className="btn-50 btn-blue flex-1">수기발행</button>
      </div>
      <InvoiceFilter
        filterOn={ filterOn }
        setFilterOn={ setFilterOn }
      ></InvoiceFilter>
    </>
  );
};