import React from 'react';
import PropTypes from 'prop-types';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Delete, DragIndicator } from '@mui/icons-material';

import { IconButton, Stack, TableCell, TableRow, Typography } from '@/mui/components';

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

function SortableRuleItem(props) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: props.value });

  const style = {
    transform: CSS.Translate.toString(transform),
    transition: transition || undefined,
  };

  return (
    <TableRow
      ref={setNodeRef}
      style={style}
      {...attributes}
      direction="row"
      justifyContent="space-between"
      alignItems="center"
    >
      <TableCell>
        <Stack direction="row" alignItems="center">
          <Stack direction="row" alignItems="center" fullWidth>
            <IconButton size={props.size} color="neutral" {...listeners} className={styles.DragControl}>
              <DragIndicator />
            </IconButton>
            <Typography variant="body2" color="text.primary" fontWeight={400}>
              {props.label}
            </Typography>
          </Stack>
          <Stack direction="row">
            <IconButton size={props.size} onClick={() => props.onDelete(props.value)}>
              <Delete />
            </IconButton>
          </Stack>
        </Stack>
      </TableCell>
    </TableRow>
  );
}

SortableRuleItem.propTypes = {
  value: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  onDelete: PropTypes.func.isRequired,
  size: PropTypes.oneOf(['xSmall', 'small', 'medium', 'large']),
};

export default SortableRuleItem;
