import { Box, Button, Stack, Typography } from '@mui/material'
import { useState } from 'react'
import { DeleteButton } from '../IconButtons'

function Report({ close, header, onSubmit, changeHeader }) {
  const formatted = header?.map((item) => {
    return {
      label: item,
      show: changeHeader?.includes(item),
    }
  })
  const [data, setData] = useState(formatted)
  const toggleShow = (index) => {
    const updatedData = [...data]
    updatedData[index].show = !updatedData[index].show
    setData(updatedData)
  }

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'center',
        }}
      >
        {data?.map((item, index) => (
          <Card
            key={item.label}
            title={item.label}
            show={item?.show}
            onToggle={() => toggleShow(index)}
          />
        ))}
      </Box>
      <Box
        sx={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginY: '20px',
        }}
      >
        <Stack direction={'row'} gap={'20px'}>
          <Button variant="outlined" onClick={close}>
            Cancel
          </Button>
          <Button
            onClick={() => {
              onSubmit(
                data.filter((item) => item.show).map((item) => item.label),
              )
              close()
            }}
          >
            Generate Report
          </Button>
        </Stack>
      </Box>
    </>
  )
}

export default Report

export const Card = ({ title, show, onToggle }) => {
  return (
    <>
      <Box
        sx={{
          flexBasis: [
            '100%',
            'calc(50% - 10px)',
            'calc(33.33% - 10px)',
            'calc(25% - 10px)',
          ],
          maxWidth: '100%',
          padding: '10px',
        }}
      >
        <Stack sx={{ border: '1px solid #1212121A', width: '100%' }}>
          <Box
            sx={{
              backgroundColor: '#1212121A',
              padding: '20px',
              borderRight: '1px solid #1212121A',
              width: '100%',
            }}
          >
            <Typography sx={{ opacity: show ? 1 : '0.5' }} variant="h4">
              {title}
            </Typography>
          </Box>
          {show ? (
            <Box
              sx={{
                padding: '10px',
                display: 'flex',
                alignItems: 'center',
                gap: '10px',
                cursor: 'pointer',
                width: '100%',
              }}
              onClick={onToggle}
            >
              <DeleteButton />
              <Typography sx={{ color: 'red' }}> Delete</Typography>
            </Box>
          ) : (
            <Box
              sx={{
                padding: '10px',
                display: 'flex',
                alignItems: 'center',
                gap: '10px',
                cursor: 'pointer',
                width: '100%',
              }}
              onClick={onToggle}
            >
              <RestoreIcon />
              <Typography sx={{ color: '#1C1C1C' }}>Restore</Typography>
            </Box>
          )}
        </Stack>
      </Box>
    </>
  )
}

export const RestoreIcon = () => {
  return (
    <>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="17.375"
        height="17.375"
        viewBox="0 0 17.375 17.375"
      >
        <path
          id="Path_19300"
          data-name="Path 19300"
          d="M17.9,9.564A8.347,8.347,0,0,0,9.564,17.9a.333.333,0,0,0,.667,0,7.675,7.675,0,1,1,2.324,5.5h1.74a.333.333,0,1,0,0-.667h-2.5a.321.321,0,0,0-.08.016c-.01,0-.02,0-.03.006a.323.323,0,0,0-.076.042.312.312,0,0,0-.034.019s0,.006-.007.009a.9.9,0,0,0-.08.111s0,0,0,.007a.328.328,0,0,0-.025.129v2.5a.333.333,0,0,0,.667,0V23.914A8.337,8.337,0,1,0,17.9,9.564Z"
          transform="translate(-9.214 -9.214)"
          fill="#1c1c1c"
          stroke="#1c1c1c"
          stroke-width="0.7"
        />
      </svg>
    </>
  )
}
