import { ConvertField, DirectionSwapButton, Notification } from '@shared/ui'
import { CommissionTable } from '@entities/commission'
import { useConverterSection } from '../model/useConverterSection'
import { AgreementCheck } from './AgreementCheck'
import styles from './ConverterSection.module.css'

export function ConverterSection() {
  const {
    isUsdtToRub,
    gasPriceRub,
    configUsdtRate,
    convert,
    pay,
    onSwap,
    commission,
    agreed,
    setAgreed,
    onPay,
    isPending,
    isPayDisabled,
    notification,
    dismissNotification,
  } = useConverterSection()

  return (
    <div className={styles.wrap}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>Конвертация</h1>
          <div className={styles.subtitle}>Данные обновляются в реальном времени</div>
        </div>
        <div className={styles.pills}>
          <div className={styles.pill}>
            Цена газа в RUB <span className={styles.pillValue}>{gasPriceRub.toFixed(2)} RUB</span>
          </div>
          <div className={styles.pill}>
            USDT/RUB <span className={styles.pillValue}>{configUsdtRate.toFixed(2)} ₽</span>
          </div>
        </div>
      </div>

      <div className={styles.body}>
        <div>
          <div className={styles.tabs}>
            <div className={styles.tab} data-active>
              КУПИТЬ
            </div>
          </div>

          <ConvertField label={isUsdtToRub ? 'Конвертируете' : 'Платите'} {...convert} />
          <DirectionSwapButton onClick={onSwap} />
          <ConvertField label={isUsdtToRub ? 'Платите' : 'Конвертируете'} {...pay} />
        </div>

        <CommissionTable {...commission} />
      </div>

      <div className={styles.bottom}>
        <AgreementCheck checked={agreed} onToggle={() => setAgreed(!agreed)} />
      </div>

      <button
        type="button"
        className={styles.payBtn}
        onClick={onPay}
        disabled={isPayDisabled}
      >
        {isPending ? 'Обработка...' : 'Оплатить'}
      </button>

      {notification && (
        <Notification
          status={notification.status}
          message={notification.message}
          onClose={dismissNotification}
        />
      )}
    </div>
  )
}
