/* eslint-disable import/extensions */

import Image from 'next/image'
import PropTypes from 'prop-types'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import ListItemText from '@mui/material/ListItemText'
import Button from '@mui/material/Button'
import Link from '@mui/material/Link'
import OpenInNewIcon from '@mui/icons-material/OpenInNew'

import licencesData from './data.json'
import licensesConditions from './conditions.json'

export default function LicensesInfo({license}) {
  const licenseInfo = licencesData.find(item => item.license === license)
  const licenseList = licenseInfo.license.split('-')

  const conditions = licenseList.map(license => licensesConditions[license])

  return (
    <Box>
      <Box sx={{marginBottom: 1, textAlign: 'center', display: 'flex', justifyContent: 'center'}}>
        <Box marginRight={0.5}>
          <Image
            width={46}
            height={46}
            alt={license}
            src='/images/cc/icons/cc.svg'
          />
        </Box>
        {licenseList.map(license => (
          <Box key={license} marginRight={0.5}>
            <Image
              width={46}
              height={46}
              alt={license}
              src={`/images/cc/icons/${license}.svg`}
            />
          </Box>
        ))}
      </Box>
      <Typography gutterBottom textAlign='center' variant='h4' fontWeight='bold'>{licenseInfo.title}</Typography>
      <Typography gutterBottom textAlign='center' marginBottom={3} variant='h6'>{licenseInfo.subtitle}</Typography>
      <Typography fontWeight='bold' variant='h5'>Vous êtes autorisé à :</Typography>
      <List sx={{marginBottom: 3}}>
        {Object.entries(licenseInfo.allowed).map(([action, description]) => (
          <ListItem key={action} alignItems='flex-start'>
            <Box marginRight={2}>
              <Image
                width={46}
                height={46}
                alt={action}
                src={`/images/cc/icons/${action}.svg`}
              />
            </Box>
            <ListItemText
              primary={<Typography sx={{textDecoration: 'underline'}} fontWeight='bold' variant='h5'>{action}</Typography>}
              secondary={<Typography variant='h6'>{description}</Typography>}
            />
          </ListItem>
        ))}
      </List>
      <Typography gutterBottom fontWeight='bold' variant='h5'>Conditions :</Typography>
      <List sx={{marginBottom: 3}}>
        {conditions.map(({name, description}, index) => (
          <ListItem key={name} alignItems='flex-start'>
            <Box marginRight={2}>
              <Image
                width={46}
                height={46}
                alt={licenseList[index]}
                src={`/images/cc/icons/${licenseList[index]}.svg`}
              />
            </Box>
            <ListItemText
              primary={<Typography sx={{textDecoration: 'underline'}} fontWeight='bold' variant='h5'>{name}</Typography>}
              secondary={<Typography variant='h6'>{description}</Typography>}
            />
          </ListItem>
        ))}
      </List>
      <Link target='_blank' rel='noreferrer' underline='none' href={licenseInfo.link}>
        <Button variant='text' endIcon={<OpenInNewIcon />}>
          Lien vers la licence
        </Button>
      </Link>
    </Box>
  )
}

LicensesInfo.propTypes = {
  license: PropTypes.string.isRequired
}