import React from 'react';
import tw from 'twin.macro';

// Loose typing for `css` because twin.macro's emitted type for the css prop
// varies across versions. Babel handles the runtime side; TS just forwards.
type IconProps = {
    className?: string;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    css?: any;
    title?: string;
    spinning?: boolean;
};

const baseSvg = tw`w-4 h-4`;
const spinAnim = tw`animate-spin`;

const Svg = ({
    children,
    className,
    css: cssProp,
    title,
    spinning,
    viewBox = '0 0 24 24',
    stroke = true,
}: React.PropsWithChildren<IconProps & { viewBox?: string; stroke?: boolean }>) => (
    <svg
        className={className}
        css={[baseSvg, spinning && spinAnim, cssProp].filter(Boolean)}
        fill={stroke ? 'none' : 'currentColor'}
        viewBox={viewBox}
        stroke={stroke ? 'currentColor' : undefined}
        aria-hidden={title ? undefined : true}
        role={title ? 'img' : undefined}
    >
        {title && <title>{title}</title>}
        {children}
    </svg>
);

export const RefreshIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
        />
    </Svg>
);

export const DocsIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
    </Svg>
);

export const PresetsIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h7" />
    </Svg>
);

export const TrashIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M1 7h22M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3"
        />
    </Svg>
);

export const EditIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
        />
    </Svg>
);

export const CheckIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
    </Svg>
);

export const XIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
    </Svg>
);

export const WarningIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
        />
    </Svg>
);

export const InfoIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
    </Svg>
);

export const ChevronDownIcon: React.FC<IconProps> = (p) => (
    <Svg {...p} viewBox="0 0 20 20" stroke={false}>
        <path
            fillRule="evenodd"
            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
            clipRule="evenodd"
        />
    </Svg>
);

export const SuccessIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
        />
    </Svg>
);

export const ErrorIcon: React.FC<IconProps> = (p) => (
    <Svg {...p}>
        <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
    </Svg>
);