import { useState } from 'react'
import { useMe } from '@features/auth'
import { TransactionsList } from '@widgets/transactions-list'
import { PurchaseRequestsList } from '@widgets/purchase-requests-list'
import styles from './TransactionsPage.module.css'

type Tab = 'transactions' | 'requests'

export function TransactionsPage() {
  const { data } = useMe()
  const [tab, setTab] = useState<Tab>('transactions')

  const isLegal = !!data && data.account_type !== 'individual'
  const activeTab: Tab = isLegal ? tab : 'transactions'

  return (
    <div className={styles.inner}>
      <div className={styles.glow} />
      <h1 className={styles.title}>Транзакции</h1>

      {isLegal && (
        <div className={styles.tabs}>
          <button
            type="button"
            className={styles.tab}
            data-active={activeTab === 'transactions' || undefined}
            onClick={() => setTab('transactions')}
          >
            Транзакции
          </button>
          <button
            type="button"
            className={styles.tab}
            data-active={activeTab === 'requests' || undefined}
            onClick={() => setTab('requests')}
          >
            Заявки
          </button>
        </div>
      )}

      {activeTab === 'transactions' ? <TransactionsList /> : <PurchaseRequestsList />}
    </div>
  )
}