import React, { useEffect, useState } from 'react'
import classNames from 'classnames'

import Link from 'next/link'

import AddIcon from '~public/icons/Add.svg'
import CrossIcon from '~public/icons/Cross.svg'
import EditIcon from '~public/icons/Edit.svg'
import LinkIcon from '~public/icons/Link.svg'
import MenuIcon from '~public/icons/Menu.svg'
import SaveIcon from '~public/icons/Save.svg'
import SettingsIcon from '~public/icons/Settings.svg'

import './index.scss'

import { ButtonType } from '~utils/enums'

interface Props {
    active?: boolean
    disabled?: boolean
    classes?: string[],
    icon?: string
    type?: ButtonType
    children?: React.ReactNode
    onClick?: (event: React.MouseEvent<HTMLElement>) => void
}

const Button = (props: Props) => {
    // States
    const [active, setActive] = useState(false)
    const [disabled, setDisabled] = useState(false)
    const [pressed, setPressed] = useState(false)
    const [buttonType, setButtonType] = useState(ButtonType.Base)

    const classes = classNames({
        Button: true,
        'Active': active,
        'btn-pressed': pressed,
        'btn-disabled': disabled,
        'save': props.icon === 'save',
        'destructive': props.type == ButtonType.Destructive
    }, props.classes)

    useEffect(() => {
        if (props.active) setActive(props.active)
        if (props.disabled) setDisabled(props.disabled)
        if (props.type) setButtonType(props.type)
    }, [props.active, props.disabled, props.type])

    const addIcon = (
        <span className='icon'>
            <AddIcon />
        </span>
    )

    const menuIcon = (
        <span className='icon'>
            <MenuIcon />
        </span>
    )

    const linkIcon = (
        <span className='icon stroke'>
            <LinkIcon />
        </span>
    )

    const crossIcon = (
        <span className='icon'>
            <CrossIcon />
        </span>
    )

    const editIcon = (
        <span className='icon'>
            <EditIcon />
        </span>
    )

    const saveIcon = (
        <span className='icon stroke'>
            <SaveIcon />
        </span>
    )

    const settingsIcon = (
        <span className='icon settings'>
            <SettingsIcon />
        </span>
    )

    function getIcon() {
        let icon: React.ReactNode
        
        switch(props.icon) {
            case 'new':      icon = addIcon; break
            case 'menu':     icon = menuIcon; break
            case 'link':     icon = linkIcon; break
            case 'cross':    icon = crossIcon; break
            case 'edit':     icon = editIcon; break
            case 'save':     icon = saveIcon; break
            case 'settings': icon = settingsIcon; break
        }

        return icon
    }

    function handleMouseDown() {
        setPressed(true)
    }

    function handleMouseUp() {
        setPressed(false)
    }
    return (
        <button 
            className={classes} 
            disabled={disabled} 
            onMouseDown={handleMouseDown}
            onMouseUp={handleMouseUp}
            onClick={props.onClick}>
                { getIcon() }

                { (props.type != ButtonType.IconOnly) ? 
                    <span className='text'>
                        { props.children }
                    </span> : '' 
                }
        </button>
    )  
}

export default Button