import React, { useState, useEffect, useMemo, useRef } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { getAnnouncementPage, getAnnouncementDetail } from 'services/announcement'
import { Text, Flex, Image, Input, Heading } from '@pancakeswap/uikit'
import ListItem from './components/ListItem'
import Detail from './components/Detail'

interface DetailProps {
  title?: string
  content?: string
  publishTime?: number
}

const MainDiv = styled.div`
  width: 100%;
  min-height: calc(100vh - 64px);
  background: ${({ theme }) => theme.colors.gradients.bubblegum};
  box-sizing: border-box;
  padding: 30px 0;
`
const TableDiv = styled.div`
  width: 80%;
  background: rgba(255, 255, 255);
  border-radius: 20px;
  margin: 0 auto;
`

const SearchDiv = styled(Flex)`
  box-sizing: border-box;
  border-bottom: 1px solid #e3e3e3;
  width: 100%;
  height: 105px;
  align-items: center;
  justify-content: center;
`

const InputMain = styled(Flex)`
  width: 60%;
  height: 45px;
  border: 1px solid #1fc7d4;
  border-radius: 30px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
`

const SearchInput = styled(Input)`
  background-color: transparent;
  width: calc(100% - 80px);
  :focus {
  }
`
const SearchBtn = styled.div`
  width: 50px;
  height: 37px;
  background: linear-gradient(90deg, #1fd4b0 0%, #1fc9d3 100%);
  border-radius: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
`

const ListMain = styled.div`
  box-sizing: border-box;
  padding: 0 30px;
`

const FlexTable = styled(Flex)`
  padding: 25px 0 20px 0;
  align-items: center;
  justify-content: space-between;
`
const TableInfo = styled.div`
  width: 70%;
`
const TextTitle = styled(Text)`
  font-size: 18px;
  color: #333333;
`
const DetailDiv = styled.div`
  width: 80%;
  background: rgba(255, 255, 255);
  border-radius: 20px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 30px;
`
const HeaderFlex = styled(Flex)`
  align-items: center;
  cursor: pointer;
`
const TextBack = styled(Text)`
  font-size: 18px;
  color: #1fc7d4;
  margin-left: 10px;
`
const HeadingText = styled(Heading)`
  margin-top: 17px;
  color: #333333;
  font-size: 32px;
`
const TextTime = styled(Text)`
  font-size: 14px;
  color: #999999;
  padding: 30px 0 20px 0;
  border-bottom: 1px solid #e3e3e3;
`
const TextInfo = styled(Text)`
  font-size: 14px;
  color: #999999;
  margin-top: 30px;
`

const Announcement: React.FC = () => {
  const { t } = useTranslation()
  const loadMoreRef = useRef<HTMLDivElement>(null)

  const [detailVisible, setDetailVisible] = useState(false)
  const [list, setList] = useState([])
  const [detailData, setDetailData] = useState<DetailProps>({ title: '', publishTime: 0, content: '' })
  const getList = async (page: number, size: number) => {
    const data = await getAnnouncementPage({ page, size })
    console.log(data.content)
    setList(data.content)
  }
  useEffect(() => {
    getList(1, 10)
  }, [])

  const lookDetail = async (id) => {
    const data = await getAnnouncementDetail(id)
    setDetailData(data)
    setDetailVisible(true)
  }
  const searchList = () => {
    getList(1, 10)
  }
  const close = () => {
    setDetailVisible(false)
  }

  const renderContent = (): JSX.Element => {
    return (
      <div>
        {list.map((item) => (
          <Text key={item.id} onClick={() => lookDetail(item.id)}>
            <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
          </Text>
        ))}
      </div>
    )
  }

  return (
    <MainDiv>
      {detailVisible ? (
        <Detail
          title={detailData.title}
          publishTime={detailData.publishTime}
          content={detailData.content}
          close={close}
        />
      ) : (
        <TableDiv>
          <SearchDiv>
            <InputMain>
              <SearchInput placeholder={t('Enter a keyword search')} />
              <SearchBtn onClick={searchList}>
                <Image src="/images/announcement/search-icon.svg" alt="" width={16} height={16} />
              </SearchBtn>
            </InputMain>
          </SearchDiv>
          <ListMain>
            {renderContent()}
            <div ref={loadMoreRef} />
            {/* {list.map((item) => (
              <Text key={item.id} onClick={() => lookDetail(item.id)}>
                <ListItem title={item.title} publishTime={item.publishTime} content={item.content} />
              </Text>
            ))} */}
          </ListMain>
        </TableDiv>
      )}
    </MainDiv>
  )
}
export default Announcement