import Head from 'next/head'
import styles from './MajorCard.module.css'
import {useRouter} from "next/router";
import useTranslation from 'next-translate/useTranslation'
import {useEffect, useState} from "react";

type Props = {
    imagePath?: string,
    setArcana?: (arcana, isRemove) => void,
    arcanaCard: any,
    isFull: boolean,
    disableSelect?: boolean
}

export default function MajorCard(props: Props) {
    const router = useRouter()
    const { t, lang } = useTranslation('common')
    const [arcanaCard, setArcanaCard] = useState(props.arcanaCard);
    const [opacity, setOpacity] = useState<any>();

    useEffect(() => {
        if (arcanaCard.isSelect && !props.disableSelect) {
            setOpacity({
                opacity: 0.4,
                border: '1px solid transparent',
                borderRadius: '5px',
                boxShadow: "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
                maxHeight: arcanaCard.type === "major" ?  "20rem" : "12rem",
                width: "auto",
                height: "auto",
                maxWidth: arcanaCard.type === "major" ?  "20vw" : "18vw",

            })
        } else {

            setOpacity({
                opacity: 1,
                border: '1px #ccc solid',
                borderRadius: '5px',
                boxShadow: "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
                maxHeight: arcanaCard.type === "major" ?  "20rem" : "15rem",
                width: "auto",
                height: "auto",
                maxWidth: arcanaCard.type === "major" ?  "20vw" : "18vw",
            })
        }
    }, [arcanaCard.isSelect]);


    const setArcana = (arcanaCardNew) => {
        if (!props.setArcana) {
           return;
        }
        if (arcanaCardNew.isSelect) {
            arcanaCardNew.isSelect = false
            props.setArcana(arcanaCardNew, true)
        } else if (!props.isFull) {
            arcanaCardNew.isSelect = true

            props.setArcana(arcanaCardNew, false)
        }

        setArcanaCard({...arcanaCardNew})

    }



    return (
        <div className={arcanaCard.type === "major" ? styles.mainCard : styles.smallCard}  onClick={() => setArcana(arcanaCard)}>
            <img style={opacity} src={arcanaCard.pathPictureCardBackground}/>
            <h1 style={{whiteSpace: "nowrap"}} >{arcanaCard.title ? arcanaCard.title : arcanaCard["titleCard_" + lang]}</h1>
        </div>
    )
}