import React, { useEffect, useState } from 'react';
import classNames from 'classnames/bind';
import styles from './SaleTab.scss';
import Tab from '../Tab';
import { multiTabList1, multiTabList2, singleTabList1, singleTabList2 } from '@src/constants/Sale';
import { EItemType, ESaleType } from '@src/constants/Enums';
import TabOwner from './TabOwner';
import TabDetail from './TabDetail';
import TabHistory from './TabHistory';
import TabBid from './TabBid';

const cx = classNames.bind(styles);

interface IOwnProps {
  type: EItemType;
  saleType?: ESaleType;
};

const SaleTab: React.FC<IOwnProps> = ({ type, saleType }) => {
  const [tab, setTab] = useState<{ title: string; type: string }[]>([]);
  const [selectedTab, setSelectedTab] = useState<string>('');

  // SaleType
  const type1 = type === EItemType.SINGLE && saleType === ESaleType.FIXED; // 싱글 & 지정가
  const type2 = type === EItemType.SINGLE && (saleType === ESaleType.AUCTION || saleType === ESaleType.TIME); // 싱글 & 입찰가/타임옥션
  const type3 = type === EItemType.MULTI && saleType === ESaleType.FIXED; // 멀티 & 지정가
  const type4 = type === EItemType.MULTI && (saleType === ESaleType.AUCTION || saleType === ESaleType.TIME); // 멀티 & 입찰가/타임옥션

  // TokenType
  const type5 = type === EItemType.SINGLE && !saleType;
  const type6 = type === EItemType.MULTI && !saleType;

  useEffect(() => {
    if (type1 || type5) {
      setTab(singleTabList1);
      setSelectedTab(singleTabList1[0].type);
    }

    if (type2) {
      setTab(singleTabList2);
      setSelectedTab(singleTabList2[0].type);
    }

    if (type3 || type6) {
      setTab(multiTabList1);
      setSelectedTab(multiTabList1[0].type);
    }
    if (type4) {
      setTab(multiTabList2);
      setSelectedTab(multiTabList1[0].type);
    }
  }, [type, saleType]);

  return (
    <div className={cx('sale_tab')}>
      <div className={cx('tab_list')}>
        <Tab tabList={tab} selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
      </div>
      {(type1 || type5) && (
        <div className={cx('tab_wrapper')}>
          {/* 세부사항 */}
          {selectedTab === 'detail' && (
            <TabDetail />
          )}
          {/* 기록 */}
          {selectedTab === 'history' && (
            <TabHistory />
          )}
        </div>
      )}
      {type2 && (
        <div className={cx('tab_wrapper')}>
          {/* 세부사항 */}
          {selectedTab === 'detail' && (
            <TabDetail />
          )}
          {/* 경매현황 */}
          {selectedTab === 'auction' && (
            <TabBid />
          )}
          {/* 기록 */}
          {selectedTab === 'history' && (
            <TabHistory />
          )}
        </div>
      )}
      {(type3 || type6) && (
        <div className={cx('tab_wrapper')}>
          {/* 소유자 */}
          {selectedTab === 'owner' && (
            <TabOwner />
          )}
          {/* 세부사항 */}
          {selectedTab === 'detail' && (
            <TabDetail />
          )}
          {/* 기록 */}
          {selectedTab === 'history' && (
            <TabHistory />
          )}
        </div>
      )}
      {type4 && (
        <div className={cx('tab_wrapper')}>
          {/* 소유자 */}
          {selectedTab === 'owner' && (
            <TabOwner />
          )}
          {/* 세부사항 */}
          {selectedTab === 'detail' && (
            <TabDetail />
          )}
          {/* 경매현황 */}
          {selectedTab === 'auction' && (
            <TabBid />
          )}
          {/* 기록 */}
          {selectedTab === 'history' && (
            <TabHistory />
          )}
        </div>
      )}
    </div>
  );
};

export default SaleTab;
