import React from 'react'
import { Card, CardBody, Col, Row } from 'reactstrap'
import { styled } from '@mui/material/styles'
import Chip from '@mui/material/Chip'
import Paper from '@mui/material/Paper'
import TagFacesIcon from '@mui/icons-material/TagFaces'
import { Circle, Info } from '@mui/icons-material'

const ListItem = styled('li')(({ theme }) => ({
  margin: theme.spacing(0.5)
}))

const Legenda = () => {
  const [chipData, setChipData] = React.useState([
    { key: 0, label: 'BerNPWP', icon: <Circle color="success" /> },
    { key: 1, label: 'Non NPWP', icon: <Circle color="warning" /> },
    { key: 2, label: 'Poi Google', icon: <Circle color="error" /> }
  ])

  const handleDelete = (chipToDelete) => () => {
    setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key))
  }

  return (
    <>
      <Paper
        sx={{
          display: 'flex',
          justifyContent: 'center',
          flexWrap: 'wrap',
          listStyle: 'none',
          p: 0.5,
          m: 0.5,
          mb: 0.5,
          opacity: '90%',
          width: '150px',
          backgroundColor: 'var(--danger)'
        }}
        component="a"
        onClick={() => {
          window.open(
            'https://cendol-djp.intranet.pajak.go.id/geoserver/',
            '_blank' // <- This is what makes it open in a new window.
          )
        }}
      >
        <div className="flex justify-content-center   align-self-center ">
          <div className="px-50 justify-content-center align-self-center text-white">
            <Info className="" />
          </div>
          <div className="px-50 justify-content-center align-self-center text-white">Klik di sini jika data poi tidak tampil</div>
        </div>
      </Paper>
      <Paper
        sx={{
          display: 'flex',
          justifyContent: 'center',
          flexWrap: 'wrap',
          listStyle: 'none',
          p: 0.5,
          m: 0.5,
          mb: 0.5,
          opacity: '75%'
        }}
        component="ul"
      >
        <div className="px-50 justify-content-center align-self-center">Legenda Poi Dasar : </div>

        {chipData.map((data) => {
          let icon

          if (data.label === 'React') {
            icon = <TagFacesIcon color="error" />
          }

          return (
            <>
              <ListItem key={data.key}>
                <Chip icon={data.icon} label={data.label} onDelete={undefined} size="small" />
              </ListItem>
            </>
          )
        })}
      </Paper>
    </>
  )
}

export default Legenda