import './navigation.css'
import '../header/header.css'
import "../../styles/styles.css"
import write from '../footer/send.svg'
import phone from '../footer/phone.svg'
import iconButton from "../../styles/iconButton.svg"
import { AnimatePresence, motion } from "framer-motion";
import chevron from '../header/chevronIcon.svg'
type THeader = {
    menuOpen?: boolean,
    language: string,
    setOpen?: (value: boolean) => void
    changeLanguage: (language: string) => void;
    setOpacity?: (value: boolean) => void;
    text?: any;

}

const container = {
    hidden: {
        translateX: '100%',
        transition: { duration: 0.2, ease: 'easeOut' }
    },
    show: {
        translateX: '0%',
        transition: { duration: 0.2, ease: 'easeIn' },
    },
    exit: {
        translateX: '0%',
        transition: { duration: 0.2, ease: 'easeOut' }
    }
}

const staggeredVariants = {
    hidden: {
        transition: {
        }
    },
    show: {
        transition: {
            staggerChildren: 0.35,
            staggerDirection: -1,

        }
    },

    exit: {
        transition: {
        }
    }
}

const items = {
    hidden: {
        opacity: 0,
    },
    show: {
        opacity: 1,
        transition: { ease: 'easeIn' },

    },

    exit: {
        opacity: 1,
    }
}

export const Nav: React.FC<THeader> = ({ menuOpen, language, changeLanguage, text }) => {

    const userLanguage = language === 'RU';

    const { cardLarge, cardLarge1, cardSmall, cardSmall1 } = text

    const langArray = [{
        value: 'ru-RU',
        name: 'RU'
    },
    {
        value: 'en-EN',
        name: 'EN'
    }]


    function langActive(lang: string, language: string) {
        if (lang === language) {
            return 'language__container_active'
        }

        else {
            return 'language__container'
        }
    }

    return (
        <AnimatePresence>
            {menuOpen && (
                <motion.nav
                    variants={container}
                    initial={'hidden'}
                    animate={'show'}
                    exit={'hidden'}
                    className={`navigation`}>
                    <motion.div
                        variants={staggeredVariants}
                        initial={'hidden'}
                        animate={'show'}
                        exit={'exit'}
                        className='nav__buttons'>
                        <motion.div
                            variants={items}
                            className='nav__header'>
                            <div className='button__nav_container'>
                                {langArray.map((lang, i) => (
                                    <div className={langActive(lang.name, language)}>
                                        <button value={lang.value} key={i} onClick={() => changeLanguage(lang.name)} className='nav__button'>{lang.name}</button>
                                    </div>
                                ))}
                            </div>
                            <div className='nav__title_container'>
                                <a target='_blank' rel="noreferrer" href={userLanguage ? 'https://graff.tech/' : 'http://en.graff.tech/'} className='nav__title'>{text.captionCompain}</a>
                                <img alt='icon' className='icon_chevron' src={chevron}></img>
                            </div>
                            <span className='nav__line'></span>
                        </motion.div>

                        <motion.a
                            href={userLanguage ? 'mailto:info@graff.tech' : 'mailto:waseem@graff.tech'}
                            variants={items}
                            className='footer__card_2'>
                            <div className='ellipse__container'>
                                <div className="main-block__icon_container">
                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                </div>
                            </div>
                            <div className={'card__write'}>
                                <img alt='icon' src={write} className='card__icon'></img>
                                <p className='card__caption'>{cardSmall.caption}</p>
                            </div>
                        </motion.a>
                        <motion.a
                            href={userLanguage ? 'tel:+7-800-770-00-76' : 'tel:+971-50-938-8902'}
                            variants={items}
                            className='footer__card_2'>
                            <div className='ellipse__container'>
                                <div className="main-block__icon_container">
                                    <img alt='icon' src={iconButton} className="main-block__icon"></img>
                                </div>
                            </div>
                            <div className='card__write'>
                                <img alt='icon' src={phone} className='card__icon'></img>
                                <p className='card__caption'>{cardSmall1.caption}</p>
                            </div>
                        </motion.a>
                        <motion.div
                            variants={items}
                            className={'footer__card_l'}>
                            <div className='card__contacts'>
                                <p className='card__email'>info@graff.tech</p>
                                <p className='card__tel'>+7 800 770 00 76</p>
                            </div>
                            <div className='card__adress'>
                                <p className='card__street'>{cardLarge.address}</p>
                                <p className='card_city'>{cardLarge.city}</p>
                            </div>
                            <p className='card_country'>{cardLarge.country}</p>
                        </motion.div>
                        <motion.div
                            variants={items}
                            className='footer__card_l'>
                            <div className='card__contacts'>
                                <p className='card__email'>waseem@graff.tech</p>
                                <p className='card__tel'>+971 50 938 8902</p>
                            </div>
                            <div className='card__adress card__adress_uae'>
                                <p className='card_city'>{cardLarge1.address}</p>
                            </div>
                            <p className='card_country'>{cardLarge1.country}</p>
                        </motion.div>
                    </motion.div>
                </motion.nav>
            )}
        </AnimatePresence>

    )
} 