import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { DragIndicator } from '@mui/icons-material';

import { Checkbox, Stack, Typography } from '@/mui/components';

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

function DimensionItem(props) {
  return (
    <div
      className={classNames(styles.DimensionItem, {
        [styles.DimensionItem___disabled]: props.disabled,
      })}
    >
      <Checkbox
        color="primary"
        size="xSmall"
        checked={props.checked}
        onChange={props.onChange}
        disabled={props.disabled}
      />

      <Stack
        direction="row"
        alignItems="center"
        justifyContent="space-between"
        fullWidth
        // eslint-disable-next-line react/prop-types
        {...props.dndListeners}
        className={classNames(styles.Wrapper, {
          [styles.Wrapper___grabbing]: props.isDragging,
        })}
      >
        <Typography className={styles.Label} variant="caption" color="text.primary" fontWeight={600}>
          {props.label}
        </Typography>

        <DragIndicator fontSize="xSmall" htmlColor="text.disabled" />
      </Stack>
    </div>
  );
}

DimensionItem.propTypes = {
  label: PropTypes.string.isRequired,
  checked: PropTypes.bool.isRequired,
  isDragging: PropTypes.bool.isRequired,
  onChange: PropTypes.func.isRequired,
  disabled: PropTypes.bool.isRequired,
};

export default DimensionItem;
