import { T9n } from 'features/T9n'

import { isMobileDevice } from 'config/userAgent'

import type { Payment } from 'requests/getUserListPayments'

import { usePaymentHistory } from './hooks'

import {
  Wrapper,
  Table,
  THead,
  Th,
  TBody,
  TRow,
  Td,
  ScPaymentDate,
  ScFirstBlock,
  ScSecondBlock,
  ScPayment,
  ScText,
} from './styled'

export const PagePaymentsHistory = () => {
  const { formattedDate, payments } = usePaymentHistory()

  return (
    <Wrapper>
      {isMobileDevice ? (
        <>
          {payments.map(
            ({
              card,
              currency,
              id,
              price,
              sub_name,
              sub_option,
              ts_payment,
            }: Payment) => (
              <ScPayment key={id}>
                <ScFirstBlock>
                  <Th>
                    <T9n t='payment_date' />
                    <ScPaymentDate>{formattedDate(ts_payment)}</ScPaymentDate>
                  </Th>
                  <Th>
                    <T9n t='sum' />
                    <ScPaymentDate>
                      {currency} {price}
                    </ScPaymentDate>
                  </Th>
                </ScFirstBlock>
                <ScSecondBlock>
                  <Th className='subscription'>
                    <T9n t='subscription_plan' />
                    <ScText>
                      {sub_option} — {sub_name}
                    </ScText>
                  </Th>
                  <Th>
                    <T9n t='payment_method' />
                    <ScText>{card}</ScText>
                  </Th>
                </ScSecondBlock>
              </ScPayment>
            ),
          )}
        </>
      ) : (
        <Table>
          <THead>
            <TRow>
              <Th>
                <T9n t='subscription_plan' />
              </Th>
              <Th>
                <T9n t='sum' />
              </Th>
              <Th>
                <T9n t='payment_date' />
              </Th>
              <Th>
                <T9n t='payment_method' />
              </Th>
            </TRow>
          </THead>
          <TBody>
            {payments.map(
              ({
                card,
                currency,
                id,
                price,
                sub_name,
                sub_option,
                ts_payment,
              }: Payment) => (
                <TRow key={id}>
                  <Td className='subscription'>
                    {sub_option} — {sub_name}
                  </Td>
                  <Td>
                    {currency} {price}
                  </Td>
                  <Td>{formattedDate(ts_payment)}</Td>
                  <Td>{card}</Td>
                </TRow>
              ),
            )}
          </TBody>
        </Table>
      )}
    </Wrapper>
  )
}
