/* eslint-disable max-len */
import * as React from 'react';
import { CSSProperties, HTMLAttributes, Component } from 'react';
import { ARROW_DIMENSIONS } from '../../consts';
import { ArrowSize } from '../../../types';

export interface AddToCartIconProps extends HTMLAttributes<HTMLOrSVGElement> {
  style?: CSSProperties;
  enabled?: boolean;
  size?: ArrowSize;
  iconColor?: string;
  showCircle?: boolean;
}

class AddToCartIcon extends Component<AddToCartIconProps> {
  public render() {
    const { style, enabled = true, size = 'medium', iconColor = 'black', showCircle = true, ...props } = this.props;
    const dynamicStyle = enabled ? iconEnabled : iconDisabled;
    const color = iconColor;
    const dim = ARROW_DIMENSIONS[size].width;

    return (
      <svg
        width={dim}
        height={dim}
        viewBox='0 0 41 41'
        style={{ ...iconStyle, ...dynamicStyle, ...style }}
        {...props}
      >
        {showCircle ? (
          <circle
            cx='20'
            cy='20'
            r='19.9'
            fill='white'
            stroke='black'
            strokeWidth='1'
          />
        ) : null}
        {/* Bag body: sharp top corners, rounded bottom corners */}
        <path d='M 12 15 L 29 15 L 29 30 Q 29 33 26 33 L 15 33 Q 12 33 12 30 Z' fill='none' stroke={color} strokeWidth='1.2' strokeLinejoin='round' />
        {/* Single centered handle */}
        <path d='M 16 19.5 C 16 7 25 7 25 19.5' fill='none' stroke={color} strokeWidth='1.2' strokeLinecap='round' />
        {/* Dots at handle connection points, 1/4 into the bag */}
        <circle cx='16' cy='19.5' r='1.2' fill={color} />
        <circle cx='25' cy='19.5' r='1.2' fill={color} />
      </svg>
    );
  }
}

const iconStyle: CSSProperties = {
  cursor: 'pointer',
};

const iconEnabled: CSSProperties = {
  transition: 'opacity 0.3s ease-in-out',
  opacity: 1,
};

const iconDisabled: CSSProperties = {
  transition: 'opacity 0.3s ease-in-out',
  opacity: 0.4,
  cursor: 'default',
};

export default AddToCartIcon;