import React, { useState } from 'react';
import PropTypes from 'prop-types';

import { CUSTOM_TAGS_COLORS } from '../../../../constants';

import CategoryColors from '../../../CategoryColors';
import { Button, Grid } from '@/mui/components';

import styles from './CreateCategory.module.scss';

function CreateCategory(props) {
  const [color, setColor] = useState(CUSTOM_TAGS_COLORS[0]);
  return (
    <Grid
      container
      direction="column"
      className={styles.Wrapper}
      onMouseDown={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      <Grid item>
        <CategoryColors selectedColor={color} onChange={setColor} />
      </Grid>
      <Grid item className={styles.CreateButtonWrapper}>
        <Button
          fullWidth
          label="Create Category"
          variant="outlined"
          size="small"
          color="primary"
          shape="rounded"
          onClick={() => props.onCreate(color)}
        >
          Create Category
        </Button>
      </Grid>
    </Grid>
  );
}

CreateCategory.propTypes = {
  onCreate: PropTypes.func.isRequired,
};

export default CreateCategory;
