import React, { useState, useEffect } from 'react'
import styled from 'styled-components'
import { useTranslation } from 'contexts/Localization'
import { Flex, Text, Button } from '@pancakeswap/uikit'
import ShopList from './ShopList'

interface ShopProp {
  name?: string | number
  value?: string | number
  onDismiss?: () => void
  close: () => void
}

const Main = styled.div`
  width: 60%;
  background-color: #fff;
  padding: 30px 15px;
  border-radius: 30px;
  /* height: 80%; */
  z-index: 10;
`
const Shop = styled.div`
  width: 100%;
  display: grid;
  gap: 18px;
  grid-template-rows: 1fr;
  margin: 0px auto;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
  & > .active {
    border: 3px solid #0deeff;
  }

  ${({ theme }) => theme.mediaQueries.xs} {
    grid-template-columns: repeat(2, 1fr);
  }
  ${({ theme }) => theme.mediaQueries.md} {
    grid-template-columns: repeat(3, 1fr);
  }
  ${({ theme }) => theme.mediaQueries.lg} {
    grid-template-columns: repeat(4, 1fr);
  }
`
const ShopFlex = styled(Flex)`
  flex-direction: column;
  background: rgba(255, 255, 255, 0.39);
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.15);
  opacity: 1;
  border-radius: 20px;
  position: relative;
`
const ShopName = styled(Text)`
  padding: 26px 0;
  text-align: center;
  font-size: 18px;
  color: #666666;
`

const SelectFlex = styled(Flex)`
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  z-index: 9;
  align-items: center;
  justify-content: center;
`
const SelectDiv = styled.div`
  width: 15px;
  height: 15px;
  background: #0deeff;
  border-radius: 50%;
  margin-left: 1px;
  margin-top: -1px;
`
const BtnFlex = styled(Flex)`
  margin-top: 30px;
  align-items: center;
  flex-direction: column;
`
const AddButton = styled(Button)`
  width: 176px;
  height: 42px;
  background: linear-gradient(269deg, #1fc8d3 0%, #1fd4b0 100%);
  border-radius: 21px;
  font-size: 14px;
  color: #ffffff;
`
const OutButton = styled(Button)`
  width: 176px;
  height: 42px;
  border: 1px solid #1fc7d4;
  background-color: #fff;
  border-radius: 21px;
  color: #1fc7d4;
  font-size: 14px;
  margin-top: 20px;
`

const ShopModal: React.FC<ShopProp> = ({ name, value, onDismiss, close }) => {
  const { t } = useTranslation()
  const [list, setList] = useState([])

  const pitchOn = (index) => {
    const arr = []
    list.forEach((item, i) => {
      const obj = item
      obj.select = i === index ? !obj.select : false
      arr.push(obj)
    })
    setList([...arr])
  }
  const onClose = () => {
    close()
  }

  useEffect(() => {
    setList([
      { label: 'Cat goddess Emerald ', type: 1, id: 1, select: true },
      { label: 'Cat goddess Emerald ', type: 2, id: 2, select: false },
      { label: 'Cat goddess Emerald ', type: 3, id: 3, select: false },
      { label: 'Cat goddess Emerald ', type: 4, id: 4, select: false },
      { label: 'Cat goddess Emerald ', type: 1, id: 5, select: false },
    ])
  }, [])

  return (
    <Main>
      <Shop>
        {list.map((item, index) => {
          return (
            <ShopFlex key={item.id} onClick={() => pitchOn(index)} className={item.select ? 'active' : ''}>
              <SelectFlex>{item.select && <SelectDiv />}</SelectFlex>
              <ShopList item={item} width={278} height={280} borderRadius="20px 20px 0 0" />
              <ShopName>{item.label}</ShopName>
            </ShopFlex>
          )
        })}
      </Shop>
      <BtnFlex>
        <AddButton>{t('add NFT')}</AddButton>
        <OutButton onClick={onClose}>{t('Sign out')}</OutButton>
      </BtnFlex>
    </Main>
  )
}
export default ShopModal