import React, { useState } from 'react'
import styled from 'styled-components'
import { Text, Button, Image, InputProps, Flex, Link } from '@pancakeswap/uikit'
import { useTranslation } from 'contexts/Localization'

interface TransactionTableProps {
  title?: string
  th?: string[]
  tr?: any
}

const FlexMain = styled.div`
  margin-top: 30px;
  height: 405px;
  background: #fff;
  font-size: 18px;
  color: #999999;
  z-index: 9999;
  position: relative;
  background: #fff;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
  border-radius: 20px;
`
const HeaderText = styled(Text)`
  font-size: 24px;
  color: #333333;
  text-align: center;
  padding: 30px 0;
`

const TypeFlex = styled(Flex)`
  flex-wrap: wrap;
  align-items: center;
  margin-top: 35px;
  padding-left: 30px;
  & > .active {
    background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
    color: #fff;
  }
`
const TypeItem = styled(Flex)`
  width: 128px;
  height: 42px;
  border: 1px solid #1fc7d4;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #1fc7d4;
  margin-right: 15px;
  cursor: pointer;
`
const TableThemed = styled(Flex)`
  height: 42px;
  align-items: center;
`
const ThemedItem = styled.div`
  width: 100%;
  height: 42px;
  line-height: 42px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #666666;
  border-top: 1px solid #e3e3e3;
`
const TableBody = styled.div``
const TrFlex = styled(Flex)`
  height: 42px;
  border-top: 1px solid #e3e3e3;
  align-items: center;
`
const TdFlex = styled(Flex)`
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #666666;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
`
const TdImage = styled(Image)`
  margin-right: 20px;
`
const TdBtnFlex = styled(Flex)`
  width: 197px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`
const DetailButton = styled(Button)`
  width: 80px;
  height: 30px;
  background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
  border-radius: 30px;
  font-size: 12px;
`
const HashText = styled(Text)`
  cursor: pointer;
  font-size: 14px;
  color: #1fc7d4;
  margin-top: 5px;
  border-bottom: 1px solid #1fc7d4;
`

const TransactionTable: React.FC = () => {
  const { t } = useTranslation()

  const ThemedList = [t('incident'), t('unit price'), t('seller'), t('purchaser'), t('trading hour')]

  const list = [
    {
      name: 'Cat goddess Emerald ',
      icon: '',
      price: '1',
      newPrice: '2',
      time: '2022-02-02',
      status: '已售卖',
      id: '1',
    },
  ]

  return (
    <FlexMain>
      <HeaderText>{t('Transaction history')}</HeaderText>
      <>
        <TableThemed>
          {ThemedList.map((item) => {
            return <ThemedItem key={item}>{item}</ThemedItem>
          })}
        </TableThemed>
        <TableBody>
          {list.map((item) => {
            return (
              <TrFlex key={item.id}>
                <TdFlex>{item.name}</TdFlex>
                <TdFlex>{item.price}</TdFlex>
                <TdFlex>{item.newPrice}</TdFlex>
                <TdFlex>{item.time}</TdFlex>
                <TdFlex>{item.status}</TdFlex>
              </TrFlex>
            )
          })}
        </TableBody>
      </>
    </FlexMain>
  )
}

export default TransactionTable