import clsx from 'clsx';
import React from 'react';
import { SvgElement, SvgElementProps } from '../VisualElements/SvgElement';
import { IconName } from './Icons.models';
import classes from './Icons.scss';

const DEFAULT_PATH_PROPS = {
  vectorEffect: 'non-scaling-stroke' as const,
  fill: 'none',
  strokeWidth: '2',
};

const DEFAULT_RECT_PROPS = {
  vectorEffect: 'non-scaling-stroke' as const,
};

const AxiIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M24.3,36h-8.5c-5,0-9.1-4.1-9.1-9.1v-5.3c0-5,4.1-9.1,9.1-9.1h8.5c5,0,9.1,4.1,9.1,9.1v5.3c0,5-4.1,9.1-9.1,9.1ZM6.8,20.4h-.9c-1.3,0-2.3,1.1-2.3,2.3v3c0,1.3,1.1,2.3,2.3,2.3h.9M33.3,28.2h.9c1.3,0,2.3-1.1,2.3-2.3v-3c0-1.3-1.1-2.3-2.3-2.3h-.9M14.1,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM25.9,20.4c-1.4,0-2.5,1.1-2.5,2.5s1.1,2.5,2.5,2.5,2.5-1.1,2.5-2.5-1.1-2.5-2.5-2.5ZM19.7,9v3.5M16.1,30.2h7.8"
    />
  </SvgElement>
);

const ArchiveIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M27.6,14.7H39V39H1.1V14.6h11.6 M9.9,22.1l10.3,9.1
	l10.3-9.1 M20.1,31.2V0"
    />
  </SvgElement>
);

const AudioIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM14.5,16.7h-5.1v6.7h5.1l7.3,5V11.7l-7.3,5ZM26.1,24.5c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5"
    />
  </SvgElement>
);

const DescriptiveAudioIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM17.1,25.5v-11h-2.6l-4.9,11M11.5,21h5.5M29.9,19.9v-.5c0-2.7-2.4-4.8-5.3-4.8h-1.9v10.2h1.9c3,0,5.3-2.2,5.3-4.8Z"
    />
  </SvgElement>
);

const ThumbnailsIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M38,20c0,9.9-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2s18,8.1,18,18ZM14.3,12c0,1.6,1.2,2.7,2.7,2.7s2.7-1.1,2.7-2.7-1.2-2.7-2.7-2.7-2.7,1.1-2.7,2.7ZM37.5,24l-8.1-8.1-11.4,11.4-6.6-6.6-7.4,7.4"
    />
  </SvgElement>
);

const BackwardOne: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M4.1,10.5C7.7,5.4,14.3,2,20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20 M12.1,10.5H4.1V2.5 M20.9,25.5V15
      c0,0-1.1,2.1-3.8,3.1"
    />
  </SvgElement>
);

const BackwardTen: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M4.2,10.5C7.8,5.4,14.4,2,20.1,2c9.9,0,18,8.1,18,18s-8.1,18-18,18s-18-8.1-18-18 M12.1,10.5H4.2V2.6
       M12.3,18.1c2.7-1,3.8-3.1,3.8-3.1v10.5 M23.6,15.3c1.8,0,3.2,2.3,3.2,5.2s-1.4,5.2-3.2,5.2s-3.2-2.3-3.2-5.2S21.8,15.3,23.6,15.3z"
    />
  </SvgElement>
);

const BlockIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20.4,2.4c9.9,0,18,8.1,18,18s-8.1,18-18,18s-18-8.1-18-18S10.5,2.4,20.4,2.4z M9.8,20.4H31"
    />
  </SvgElement>
);

const BulkIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M33.1,38.6H1.3V6.8h31.8V38.6z M26.8,14.4L15.1,27.8l-7.1-7.5 M38.7,31.2V1.4h-29"
    />
  </SvgElement>
);

export const BulkEditIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M32.7,18.5l4.4,4.4-10.5,10.5-4.4-4.4,10.5-10.5ZM32.2,12.9v-7.7H10M8.5,16.5h12.9M8.5,21h12.9M8.5,25.5h7M27.2,18.5v-8.6H2.9v24.7h14.4M22.3,29l-1.6,5.8,6-1.4"
    />
  </SvgElement>
);

export const CalendarIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M12.6,34.8H1.9V5h33.8v8.6 M26.7,15.1c-6.3,0-11.5,5.2-11.5,11.5S20.3,38,26.7,38s11.4-5.2,11.4-11.6
        S33,15.1,26.7,15.1z M35.7,10.9 M1.9,10.9 M10.9,1v9.4 M26.7,1v9.4 M26.2,19.1v8.2l0,0h6.5"
    />
  </SvgElement>
);

const CheckmarkIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M0.9,17.8L16,32.5l23.1-25" />
  </SvgElement>
);

const ChevronDownIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      transform="rotate(90, 20, 20)"
      d="M9.2,39.1L30.8,20L9.2,0.9"
    />
  </SvgElement>
);

const ChevronLeftIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      transform="rotate(180, 20, 20)"
      d="M9.2,39.1L30.8,20L9.2,0.9"
    />
  </SvgElement>
);

const ChevronRightIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M9.2,39.1L30.8,20L9.2,0.9" />
  </SvgElement>
);

const CollapseLeftIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M30.7,9.8l-10.2,10.2,10.2,10.2M9.3,3v34" />
  </SvgElement>
);

const CollapseRightIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M9.3,9.8l10.2,10.2-10.2,10.2M30.7,3v34" />
  </SvgElement>
);

const ChevronUpIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      transform="rotate(-90, 20, 20)"
      d="M9.2,39.1L30.8,20L9.2,0.9"
    />
  </SvgElement>
);

const ClearAllIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M28.6,33.7H11.2l-7.2-7.2L24.2,6.3l11.8,11.8-15.6,15.6M18.6,11.9l11.8,11.8M31.9,33.7h3.7"
    />
  </SvgElement>
);

const ClosedCaptionIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM17.5,17.8c0-.7-.5-3-3.6-3s-3.6,2.3-3.6,4.3v1.6c0,1.3,0,4.6,3.6,4.6s3.8-2.6,3.8-3M29.6,17.8c0-.7-.5-3-3.6-3s-3.6,2.3-3.6,4.3v1.6c0,1.3,0,4.6,3.6,4.6s3.8-2.6,3.8-3"
    />
  </SvgElement>
);

const CopyIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M29.6,38.8H3.2V8.4h17l9.3,9.3V38.8z M20.2,8.4v9.3h9.3 M33.4,31.6h3.4V10.5l-9.3-9.3h-17v3.2 M27.5,1.2v9.3
      h9.3"
    />
  </SvgElement>
);

const DeleteIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M6.5,7.3l2.9,31.3h21.1l2.9-31.3 M0.5,7.2h39 M15.1,13.4L16,33.1 M24.7,13.4l-0.9,19.7 M14.2,7.2l1.2-5.8h8.3
        l1.1,5.8"
    />
  </SvgElement>
);

const DetailsIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M4,8.7h32 M4,16.4h10.2 M36,31.3h-9.5 M18.3,16.4H36 M22.4,31.3H4 M4,24.1h32"
    />
  </SvgElement>
);

const DragIcon: React.FC<SvgElementProps> = (props) => {
  const RECT_PROPS = {
    ...DEFAULT_RECT_PROPS,
    width: '5.5',
    height: '5.5',
    fill: '#fff',
  };

  return (
    <SvgElement {...props}>
      <rect {...RECT_PROPS} x="11.4" y="5.4" />
      <rect {...RECT_PROPS} x="11.4" y="17.7" />
      <rect {...RECT_PROPS} x="11.4" y="30" />
      <rect {...RECT_PROPS} x="23.6" y="5.4" />
      <rect {...RECT_PROPS} x="23.6" y="17.7" />
      <rect {...RECT_PROPS} x="23.6" y="30" />
    </SvgElement>
  );
};

const EllipsisIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M6.8,30c0,1.3-1.1,2.4-2.4,2.4S2,31.3,2,30s1.1-2.4,2.4-2.4S6.8,28.7,6.8,30z M20,27.6c-1.3,0-2.4,1.1-2.4,2.4
        s1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4S21.3,27.6,20,27.6z M35.6,27.6c-1.3,0-2.4,1.1-2.4,2.4s1.1,2.4,2.4,2.4S38,31.3,38,30
        S36.9,27.6,35.6,27.6z"
    />
  </SvgElement>
);

const ErrorIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M12.5,12.5l15,15 M27.5,12.5l-15,15"
    />
  </SvgElement>
);

const ExternalIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M39.8,14.8 M25.1,0.2 M38.9,15.7V1.3H24.8 M38.9,1.3
      L16.4,23.8 M20.8,8.5H1.2v30.4h29.7V19.4"
    />
  </SvgElement>
);

const FileIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M1,34.7l4.4-18.8H39l-4.3,18.8L1,34.7L1,5.3h12.1
        l3.5,3.8h18.1v6.9"
    />
  </SvgElement>
);

const FiltersIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M5.7,4.7h28.6l-11.3,12v13.6l-6.5,5.1v-18.4L5.7,4.7Z"
    />
  </SvgElement>
);

const ForwardOne: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M35.9,10.5C32.3,5.4,25.7,2,20,2C10.1,2,2,10.1,2,20s8.1,18,18,18s18-8.1,18-18 M28,10.5h7.9V2.6 M17.1,18.1
      c2.7-1,3.8-3.1,3.8-3.1v10.5"
    />
  </SvgElement>
);

const ForwardTen: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M35.9,10.5C32.3,5.4,25.7,2,20,2C10.1,2,2,10.1,2,20s8.1,18,18,18s18-8.1,18-18 M28,10.5h7.9V2.6 M12.3,18.1
      c2.7-1,3.8-3.1,3.8-3.1v10.5 M23.6,15.3c1.8,0,3.2,2.3,3.2,5.2s-1.4,5.2-3.2,5.2s-3.2-2.3-3.2-5.2S21.8,15.3,23.6,15.3z"
    />
  </SvgElement>
);

const InfoIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,29.9
        V16.2l0,0V29.9z M20,10.1v2.6l0,0V10.1z"
    />
  </SvgElement>
);

const InProgressIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20 M3.9,12c-0.7,1.3-1.2,2.7-1.5,4.2 M16.5,13v14 M23.5,13v14
        M16.1,2.4c-1.5,0.3-3,0.9-4.3,1.6 M8.9,5.8c-1.2,0.9-2.3,2-3.2,3.2"
    />
  </SvgElement>
);

const MidlineEllipsisIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M8,20c0,1.1-0.9,2-2,2S4,21.1,4,20s0.9-2,2-2S8,18.9,8,20z M20,18
        c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S21.1,18,20,18z M34,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S35.1,18,34,18z"
    />
  </SvgElement>
);

const MinusIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M0,20h40" />
  </SvgElement>
);

const MuteIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M22,7.5v25L13.5,25h-9V15h9L22,7.5z M26.4,24.6c1.8-0.8,3-2.6,3-4.7c0-1.9-1.1-3.6-2.6-4.5 M28.7,30.6
      c4-1.9,6.8-6,6.8-10.7c0-4.5-2.6-8.5-6.3-10.5"
    />
  </SvgElement>
);

const NavigateRightIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M22.8,1.1l15.4,15.4L24.1,30.6 M38.2,16.5H4.4v23.1"
    />
  </SvgElement>
);

const PauseIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M4.5,2h10.3v36H4.5V2z M25.2,2h10.3v36H25.2V2z"
    />
  </SvgElement>
);

const PlayIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      fill="none"
      strokeWidth="2"
      vectorEffect="non-scaling-stroke"
      d="M33,20L7,35.4V4.6L33,20z"
    />
  </SvgElement>
);

const PlusIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M0,20h40 M20,40V0" />
  </SvgElement>
);

const PublishIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M1,27v8.6h38V27 M4.6,10.6l5.6-6.3l6.2,6.3 M10.2,4.4v24 M23.6,10.6l5.6-6.3l6.2,6.3 M29.2,4.4v24"
    />
  </SvgElement>
);

const QuickEditIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M2,4.5H38V35.5H2ZM16,4.5V35.5M6,12.5H12M6,17.5H12M6,22.5H12M6,27.5H12M21,12.5H32"
    />
  </SvgElement>
);

const QuickEditStationIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M7.5,4.5h25v31H7.5V4.5ZM17.82,13.14h8.87M12.98,13.14h3.07M12.98,17.71h3.07M12.98,22.29h3.07M12.98,26.86h3.07M17.82,17.71h8.87M17.82,26.86h8.87M17.82,22.29h4.84"
    />
  </SvgElement>
);

const RemoveFilterIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M13.7,16.9L3,4.6h28.6l-11.3,12v13.6l-6.5,5.1V16.9z M32.9,22.9l6.1,6.1L32.9,22.9z M32.9,22.9
      l-6.1-6.1L32.9,22.9l-6.1,6.1L32.9,22.9z M32.9,22.9l6.1-6.1L32.9,22.9z"
    />
  </SvgElement>
);

const ReplaceIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M25.6,6.4l6.2,6.2l-6.2,6.2
       M31.8,12.6H8.2 M14.4,21.2l-6.2,6.2l6.2,6.2 M8.2,27.4h23.6"
    />
  </SvgElement>
);

const RetryIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M9.5,27.3c-4.1-5.8-2.6-13.8,3.1-17.8c4.5-3.2,10.6-3.1,15,0.2 M11.9,18.8l-2.4,8.5L1,24.8 M27,21.4l4.2-7.8
      l7.8,4.2 M31.2,13.6c3.6,6.1,1.5,13.9-4.6,17.5c-4.1,2.4-9.2,2.3-13.2-0.2"
    />
  </SvgElement>
);

const SaveIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <>
      <path
        {...DEFAULT_PATH_PROPS}
        d="M15.8,30.1c0,0-6.2,0.1-7.6-0.1c-3.3-0.4-5.8-3.3-5.6-6.7c-0.2-6,6.9-6.6,6.9-6.6
    s-0.7-6.4,5-7.5c3.2-0.8,6.5,0.8,7.8,3.8c1.5-0.6,3.2-0.6,4.7,0.2c1.3,0.8,2.2,2.1,2.4,3.6c0,0,8-0.5,8.1,6.6c0,7.1-6.7,6.7-6.7,6.7
    h-6.5"
      />
      <path
        {...DEFAULT_PATH_PROPS}
        d="M20.1,33V19.4 M15.7,23.8l4.3-4.3l4.3,4.3"
      />
    </>
  </SvgElement>
);

const SnapshotIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M29.5,21c0,5.2-4.3,9.5-9.5,9.5s-9.5-4.3-9.5-9.5s4.3-9.5,9.5-9.5S29.5,15.8,29.5,21z M37.9,9.1h-8.1l-2.3-4.2
      H12.6l-2.3,4.2H2.1C1.5,9.1,1,9.6,1,10.3v23.6C1,34.5,1.5,35,2.1,35h35.7c0.6,0,1.1-0.5,1.1-1.1V10.3C39,9.6,38.5,9.1,37.9,9.1z
       M34.8,13.4h-1.5v1.4h1.5V13.4z M14.1,19.8l5.4,5.4l8.5-9.3"
    />
  </SvgElement>
);

const StopIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M5,5h30v30H5V5z" />
  </SvgElement>
);

const SubtitlesIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM10.1,17.7h19.8M10.1,24.3h5.9M19.5,24.3h10.4"
    />
  </SvgElement>
);

const SuccessIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5
        L17.8,26.3L11,19.1"
    />
  </SvgElement>
);

const UnarchiveIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M27.6,16.2H39V39H1.1V16.1h11.6 M30.6,11.1L20.3,2L10,11.1 M20.3,2v31.2"
    />
  </SvgElement>
);

const UndoIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M2,11.8h36v25.8H3.2 M11.4,2.4L2,11.8l9.4,9.4"
    />
  </SvgElement>
);

const UnmuteIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M22,7.5v25L13.4,25h-9V15h9L22,7.5z M26.2,14.9l9.4,9.4 M35.6,14.9l-9.4,9.4"
    />
  </SvgElement>
);

const UnpublishIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M26.1,7.6l-6.2-5.5l-6.2,5.5 M19.9,2v14.8 M9.1,16.2L30.9,38 M30.9,16.2L9.1,38"
    />
  </SvgElement>
);

const UploadIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M2,1.4h36 M20.1,39.4V8.7 M29.8,17.3l-9.7-8.6l-9.7,8.6"
    />
  </SvgElement>
);

const WarningIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,10.1v13.7l0,0V10.1z M20,29.9v-2.6l0,0
        V29.9z"
    />
  </SvgElement>
);

const VideoIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path
      {...DEFAULT_PATH_PROPS}
      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20,10.1,2,20,2ZM15.9,14.2l10.2,5.7-10.2,5.8v-11.5Z"
    />
  </SvgElement>
);

const XIcon: React.FC<SvgElementProps> = (props) => (
  <SvgElement {...props}>
    <path {...DEFAULT_PATH_PROPS} d="M2.4,2.4l35.3,35.3 M37.6,2.4L2.4,37.6" />
  </SvgElement>
);

export interface IconsProps extends SvgElementProps {
  icon?: IconName;
}

export const Icons: React.FC<IconsProps> = ({ icon, className, ...props }) => {
  const iconComponents = {
    [IconName.Axi]: AxiIcon,
    [IconName.Archive]: ArchiveIcon,
    [IconName.Audio]: AudioIcon,
    [IconName.DescriptiveAudio]: DescriptiveAudioIcon,
    [IconName.ThumbnailsIcon]: ThumbnailsIcon,
    [IconName.BackwardOne]: BackwardOne,
    [IconName.BackwardTen]: BackwardTen,
    [IconName.Block]: BlockIcon,
    [IconName.Bulk]: BulkIcon,
    [IconName.BulkEdit]: BulkEditIcon,
    [IconName.Calendar]: CalendarIcon,
    [IconName.Checkmark]: CheckmarkIcon,
    [IconName.ChevronDown]: ChevronDownIcon,
    [IconName.ChevronLeft]: ChevronLeftIcon,
    [IconName.ChevronRight]: ChevronRightIcon,
    [IconName.ChevronUp]: ChevronUpIcon,
    [IconName.CollapseLeft]: CollapseLeftIcon,
    [IconName.CollapseRight]: CollapseRightIcon,
    [IconName.ClearAll]: ClearAllIcon,
    [IconName.ClosedCaption]: ClosedCaptionIcon,
    [IconName.Copy]: CopyIcon,
    [IconName.Delete]: DeleteIcon,
    [IconName.Details]: DetailsIcon,
    [IconName.Drag]: DragIcon,
    [IconName.Ellipsis]: EllipsisIcon,
    [IconName.Error]: ErrorIcon,
    [IconName.External]: ExternalIcon,
    [IconName.File]: FileIcon,
    [IconName.Filters]: FiltersIcon,
    [IconName.ForwardOne]: ForwardOne,
    [IconName.ForwardTen]: ForwardTen,
    [IconName.Info]: InfoIcon,
    [IconName.InProgress]: InProgressIcon,
    [IconName.MidlineEllipsis]: MidlineEllipsisIcon,
    [IconName.Minus]: MinusIcon,
    [IconName.Mute]: MuteIcon,
    [IconName.NavigateRight]: NavigateRightIcon,
    [IconName.Pause]: PauseIcon,
    [IconName.Play]: PlayIcon,
    [IconName.Plus]: PlusIcon,
    [IconName.Publish]: PublishIcon,
    [IconName.QuickEdit]: QuickEditIcon,
    [IconName.QuickEditStation]: QuickEditStationIcon,
    [IconName.RemoveFilter]: RemoveFilterIcon,
    [IconName.Replace]: ReplaceIcon,
    [IconName.Retry]: RetryIcon,
    [IconName.Save]: SaveIcon,
    [IconName.Snapshot]: SnapshotIcon,
    [IconName.Stop]: StopIcon,
    [IconName.Subtitles]: SubtitlesIcon,
    [IconName.Success]: SuccessIcon,
    [IconName.Unarchive]: UnarchiveIcon,
    [IconName.Undo]: UndoIcon,
    [IconName.Unmute]: UnmuteIcon,
    [IconName.Unpublish]: UnpublishIcon,
    [IconName.Upload]: UploadIcon,
    [IconName.Video]: VideoIcon,
    [IconName.Warning]: WarningIcon,
    [IconName.X]: XIcon,
  };

  const componentClassName = clsx(classes.icons, className);

  if (icon === undefined) {
    return <SvgElement className={componentClassName} {...props} />;
  }

  const IconComponent = iconComponents[icon];
  return <IconComponent className={componentClassName} {...props} />;
};
