import CircleIcon from '@mui/icons-material/Circle';
import CircleOutlinedIcon from '@mui/icons-material/CircleOutlined';
import { makeStyles } from '@mui/styles';
import React from 'react';

const useStyles = makeStyles({
  itemDescription: {
    fontSize: '13px',
    color: 'gray',
  },
  spring: {
    backgroundColor: '#FFF1A6',
    fontSize: '11px',
    margin: '0 5px',
    padding: '1px 4px',
    borderRadius: '5px',
    border: 'solid #B4F9A5',
  },
  summer: {
    backgroundColor: '#15B2D3',
    fontSize: '11px',
    margin: '0 5px',
    padding: '1px 4px',
    borderRadius: '5px',
    border: 'solid #236E96',
    color: 'white',
  },
  fall: {
    backgroundColor: '#603C14',
    fontSize: '11px',
    margin: '0 5px',
    padding: '1px 4px',
    borderRadius: '5px',
    border: 'solid #D45B12',
    color: 'white',
  },
  winter: {
    backgroundColor: '#42687C',
    fontSize: '11px',
    margin: '0 5px',
    padding: '1px 4px',
    borderRadius: '5px',
    border: 'solid #84A5B8',
    color: 'white',
  },
});

const ItemDescription = (color, season) => {
  const classes = useStyles();

  const getColorDescription = (color) => {
    if (color === 'White') {
      return (
        <CircleOutlinedIcon
          style={{
            fontSize: '10px',
            color: 'LightGrey',
          }}
        />
      );
    } else {
      return (
        <CircleIcon
          style={{
            fontSize: '10px',
            color: color,
          }}
        />
      );
    }
  };

  const getSeasonBadge = (season) => {
    if (season === 'Spring') {
      return <span className={classes.spring}>Spring</span>;
    } else if (season === 'Summer') {
      return <span className={classes.summer}>Summer</span>;
    } else if (season === 'Fall') {
      return <span className={classes.fall}>Fall</span>;
    } else if (season === 'Winter') {
      return <span className={classes.winter}>Winter</span>;
    }
  };

  return (
    <React.Fragment>
      <span className={classes.itemDescription}>
        {color && (
          <span>
            color : {color} {getColorDescription(color)}{' '}
          </span>
        )}
        {season && getSeasonBadge(season)}
      </span>
    </React.Fragment>
  );
};

export default ItemDescription;