import React, { PropsWithChildren, useMemo } from 'react'
import { Icon } from '@chakra-ui/react'
import ButtonWithIcon, { ImageButtonProps, ImageButtonVariant } from './ImageButton'

export enum ButtonLinkImageType {
    Arrow,
    Download,
    External,
}

const icons = {
    [ButtonLinkImageType.Arrow]: {
        [ImageButtonVariant.White]: <Icon width="20px" height="17px" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9365 3.81226L19.3775 8.5L14.9365 13.1877L13.4846 11.8123L15.6751 9.5H0V7.5H15.6751L13.4846 5.18775L14.9365 3.81226Z" fill="black" />
        </Icon>
        ,
        [ImageButtonVariant.Black]: <Icon width="20px" height="17px" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9365 3.81226L19.3775 8.5L14.9365 13.1877L13.4846 11.8123L15.6751 9.5H0V7.5H15.6751L13.4846 5.18775L14.9365 3.81226Z" fill="white" />
        </Icon>
        ,
        [ImageButtonVariant.Current]: <Icon width="20px" height="17px" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.9365 3.81226L19.3775 8.5L14.9365 13.1877L13.4846 11.8123L15.6751 9.5H0V7.5H15.6751L13.4846 5.18775L14.9365 3.81226Z" fill="currentColor" />
        </Icon>
    },
    [ButtonLinkImageType.Download]: {
        [ImageButtonVariant.White]: <Icon width="20px" height="17px" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.58579L9 0H11L11 5.58579L13.2929 3.29289L14.7071 4.70711L10 9.41421L5.29289 4.70711L6.70711 3.29289L9 5.58579ZM0 6H2V13H18V6H20V15H0V6Z" fill="black" />
        </Icon>
        ,
        [ImageButtonVariant.Black]: <Icon width="20px" height="17px" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.58579L9 0H11L11 5.58579L13.2929 3.29289L14.7071 4.70711L10 9.41421L5.29289 4.70711L6.70711 3.29289L9 5.58579ZM0 6H2V13H18V6H20V15H0V6Z" fill="white" />
        </Icon>
        ,

        [ImageButtonVariant.Current]: <Icon width="20px" height="17px" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.58579L9 0H11L11 5.58579L13.2929 3.29289L14.7071 4.70711L10 9.41421L5.29289 4.70711L6.70711 3.29289L9 5.58579ZM0 6H2V13H18V6H20V15H0V6Z" fill="currentColor" />
        </Icon>
    },
    [ButtonLinkImageType.External]: {
        [ImageButtonVariant.White]: <Icon width="20px" height="19px" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.82837 14.8284L14.9203 4.73658M14.9203 4.73658H9.26342M14.9203 4.73658V10.3934" stroke="white" stroke-width="2" />
        </Icon>
        ,
        [ImageButtonVariant.Black]: <Icon width="20px" height="19px" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.82837 14.8284L14.9203 4.73658M14.9203 4.73658H9.26342M14.9203 4.73658V10.3934" stroke="black" stroke-width="2" />
        </Icon>
        ,
        [ImageButtonVariant.Current]: <Icon width="20px" height="19px" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.82837 14.8284L14.9203 4.73658M14.9203 4.73658H9.26342M14.9203 4.73658V10.3934" stroke="currentColor" stroke-width="2" />
        </Icon>
        ,
    },
}

// Icon komponenta s switch pro různé typy ikon
export const ButtonIcon = ({
    imageType,
    variant
}: {
    imageType: ButtonLinkImageType,
    variant: ImageButtonVariant
}) => {
    return icons?.[imageType]?.[variant] ?? icons[ButtonLinkImageType.Arrow][ImageButtonVariant.Current]
}

type Props = PropsWithChildren<Pick<ImageButtonProps, 'variant'> & {
    target?: '_blank' | '_self'
    iconType?: ButtonLinkImageType
}>

const ButtonLink = ({
    variant,
    iconType,
    target,
    children,
}: Props) => {

    const icon = useMemo(() => {
        return icons[iconType][variant]
    }, [iconType, variant])

    return (
        <ButtonWithIcon
            image={icon}
            variant={variant}
            target={target}
        >
            {children}
        </ButtonWithIcon>
    )
}

ButtonLink.defaultProps = {
    variant: ImageButtonVariant.Current,
    iconType: ButtonLinkImageType.Arrow
}

export default ButtonLink