import { Tab } from '@headlessui/react';
import classNames from 'classnames';
import { SettleRequestType } from '../../api/settle-request';
import SettleRequests from './settle-requests/component';
import SettleRequest from './settle-request';

export type FinancialTabPropsType = { settleRequests: SettleRequestType[] };

function FinancialTab({ settleRequests }: FinancialTabPropsType) {
  const hasPendingSettleRequest =
    settleRequests.length > 0 && !settleRequests[settleRequests.length - 1].status;

  return (
    <div data-testid='financial-tab'>
      <Tab.Group>
        <Tab.List className='mx-auto mt-6 mb-10 flex w-fit rounded bg-gray-400'>
          {TAB_NAMES.map(tabName => (
            <Tab
              key={tabName}
              className={({ selected }) =>
                classNames(
                  'py-1.5 px-3 text-sm text-white hover:font-medium',
                  'first:rounded-ts first:rounded-bs last:rounded-te last:rounded-be',
                  selected ? 'bg-teal-600' : 'hover:bg-gray-500'
                )
              }
            >
              {tabName}
            </Tab>
          ))}
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>
            <SettleRequests settleRequests={settleRequests} />
          </Tab.Panel>
          <Tab.Panel>
            <SettleRequest hasPendingSettleRequest={hasPendingSettleRequest} />
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>
    </div>
  );
}

export const TAB_NAMES = ['سوابق مالی', 'درخواست تسویه جدید'];

export default FinancialTab;
