import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import { gridDraggable, types } from '@pie-lib/plot';
import { color } from '@pie-lib/render-ui';
import * as utils from '../../utils';
import { correct, disabled, incorrect, missing } from '../shared/styles';

const StyledLine = styled('line')(({ disabled: isDisabled, correctness }) => ({
  strokeWidth: 7,
  transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
  stroke: 'transparent',
  pointerEvents: 'stroke',
  '&:hover': {
    strokeWidth: 4,
    stroke: color.defaults.BLACK,
  },
  ...((isDisabled || correctness) && { pointerEvents: 'none' }),
}));

class RawLine extends React.Component {
  static propTypes = {
    className: PropTypes.string,
    from: types.PointType,
    to: types.PointType,
    graphProps: types.GraphPropsType.isRequired,
    disabled: PropTypes.bool,
    correctness: PropTypes.string,
  };

  static defaultProps = {
    from: {},
    to: {},
  };

  render() {
    // eslint-disable-next-line no-unused-vars
    const { graphProps, from, to, className, disabled, correctness, ...rest } = this.props;
    const { scale } = graphProps;
    return (
      <StyledLine
        x1={scale.x(from.x)}
        y1={scale.y(from.y)}
        x2={scale.x(to.x)}
        y2={scale.y(to.y)}
        className={className}
        disabled={disabled}
        correctness={correctness}
        {...rest}
      />
    );
  }
}

export const Line = RawLine;

export default gridDraggable({
  bounds: (props, { domain, range }) => {
    const { from, to } = props;
    const area = utils.lineToArea(from, to);
    return utils.bounds(area, domain, range);
  },
  anchorPoint: (props) => {
    const { from } = props;
    return from;
  },
  fromDelta: (props, delta) => {
    const { from, to } = props;
    return {
      from: utils.point(from).add(utils.point(delta)),
      to: utils.point(to).add(utils.point(delta)),
    };
  },
})(Line);