import React, { useEffect, useRef, useState } from 'react';
import SVGAlltSaman from 'assets/svg/allt-saman.svg';
import SVG4gnet from 'assets/svg/FourGnet.svg';
import SVGPhone from 'assets/svg/phone.svg';
import SVGFiber from 'assets/svg/wifihouse.svg';
import classNames from 'classnames/bind';
import useOutsideClick from 'hooks/useOutsideClick';
import Link from 'next/link';
import { useTranslation } from 'utils/i18n';
import { getLinks } from 'utils/links';

import s from './AddServiceMenu.module.scss';

const cn = classNames.bind(s);

interface IAddServiceMenuProps {
  isVisible: boolean;
  onOutsideClick: () => void;
  onClick: () => void;
}

const AddServiceMenu = ({ isVisible, onClick, onOutsideClick }: IAddServiceMenuProps) => {
  const { farsimi, netid } = getLinks();
  const [canDetectOutsideClick, setCanDetectOutsideClick] = useState(false);
  const ref = useRef<HTMLDivElement>(null);
  const { t } = useTranslation('common');

  useEffect(() => {
    if (isVisible) {
      const timer = setTimeout(() => setCanDetectOutsideClick(true), 100);
      return () => clearTimeout(timer);
    } else {
      setCanDetectOutsideClick(false);
    }
  }, [isVisible]);

  useOutsideClick(ref, () => {
    if (canDetectOutsideClick) {
      onOutsideClick();
    }
  });

  return (
    <div className={cn(s.addServiceMenu, { isVisible })} ref={ref}>
      <div className={s.addServiceMenu__shadow}>
        <div className={s.addServiceMenu__row}>
          <div className={s.addServiceMenu__col}>
            <h3 className={s.addServiceMenu__heading}>{t('service.mobile')}</h3>
            <Link
              href={farsimi.askrift.link}
              className={cn(s.addServiceMenu__link, 'color-ocean')}
              target="blank_"
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-ocean')}>
                <SVGPhone className={cn(s.addServiceMenu__svg, 'color-ocean')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.postpaid')}</span>
            </Link>
            <Link
              href={farsimi.frelsi.link}
              className={cn(s.addServiceMenu__link, 'color-pink')}
              target="blank_"
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-pink')}>
                <SVGPhone className={cn(s.addServiceMenu__svg, 'color-pink')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.prepaid')}</span>
            </Link>
            <Link
              href={farsimi.minusatjan.link}
              className={cn(s.addServiceMenu__link, 'color-pink')}
              target="blank_"
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-pink')}>
                <SVGPhone className={cn(s.addServiceMenu__svg, 'color-pink')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.minus18')}</span>
            </Link>
            <Link
              href={farsimi.oskradFrelsi.link}
              className={cn(s.addServiceMenu__link, 'color-pink')}
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-pink')}>
                <SVGPhone className={cn(s.addServiceMenu__svg, 'color-pink')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.unregistered')}</span>
            </Link>
          </div>
          <div className={s.addServiceMenu__col}>
            <h3 className={s.addServiceMenu__heading}>{t('service.internet')}</h3>
            <Link
              href={netid.ljosleidari.link}
              className={cn(s.addServiceMenu__link, 'color-yellow')}
              target="blank_"
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-yellow')}>
                <SVGFiber className={cn(s.addServiceMenu__svg, 'color-yellow')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.fiber')}</span>
            </Link>
            <Link
              href={netid.net.link}
              className={cn(s.addServiceMenu__link, 'color-green')}
              target="blank_"
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-green')}>
                <SVG4gnet className={cn(s.addServiceMenu__svg, 'color-green')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.4gnet')}</span>
            </Link>
            <Link
              href={netid.alltsaman.link}
              className={cn(s.addServiceMenu__link, 'color-orange')}
              target="blank_"
              onClick={() => onClick()}
            >
              <span className={cn(s.addServiceMenu__icon, 'color-orange')}>
                <SVGAlltSaman className={cn(s.addServiceMenu__svg, 'color-orange')} />
              </span>
              <span className={s.addServiceMenu__label}>{t('service.alltsaman')}</span>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AddServiceMenu;