import React, { FC, useRef } from 'react';
import { gsap } from 'gsap';

import SVGArrow from 'assets/svg/arrow.svg';

import { useTranslation } from 'utils/i18n';

import { Dl } from '../dl/Dl';
import s from './Benefit.module.scss';

interface IBenefitProps {
  logo: string;
  title: string;
  subtitle: string;
  type: 'discount' | '2f1';
  details: {
    description: string;
    website: string;
    phone?: string;
    addresses?: string[];
  };
}

export const Benefit: FC<IBenefitProps> = ({ logo, title, subtitle, type, details }) => {
  const { t } = useTranslation('cards');
  const detailsRef = useRef<HTMLDivElement>(null);
  const arrowRef = useRef<HTMLDivElement>(null);
  const tl = useRef<gsap.core.Timeline | null>(null);

  const handleToggle = () => {
    if (tl.current) {
      return tl.current.reversed() ? tl.current.play() : tl.current.reverse();
    }

    if (!detailsRef.current || !arrowRef.current) {
      return;
    }

    const t = gsap.timeline();

    t.set(detailsRef.current, {
      display: 'block',
      height: 0,
      opacity: 0,
      padding: '30px 30px 5px',
    });

    t.addLabel('parallel');

    t.to(
      arrowRef.current,
      {
        duration: 0.25,
        rotation: 180,
      },
      'parallel',
    );

    t.to(
      detailsRef.current,
      {
        duration: 0.25,
        opacity: 1,
        height: 'auto',
      },
      'parallel',
    );

    tl.current = t;
  };

  return (
    <div className={s.benefit}>
      <button className={s.benefit__button} onClick={handleToggle}>
        <img className={s.benefit__logo} src={logo} />
        <h3 className={s.benefit__title}>{title}</h3>
        <p className={s.benefit__subtitle}>{subtitle}</p>

        <p className={s.benefit__tag}>
          <span>{type === 'discount' ? '%' : '2F1'}</span>
          {t('benefit.discount')}
        </p>

        <span ref={arrowRef} className={s.benefit__arrow}>
          <SVGArrow />
        </span>
      </button>

      <div ref={detailsRef} className={s.benefit__details}>
        <Dl
          label={t('shared.description')}
          data={<p className={s.benefit__subtitle}>{details.description}</p>}
        />

        <Dl
          label={t('benefit.website')}
          data={<p className={s.benefit__tag}>{details.website}</p>}
        />

        {details.phone && (
          <Dl label={t('benefit.phone')} data={<p className={s.benefit__tag}>{details.phone}</p>} />
        )}

        {details.addresses && (
          <Dl
            label={t('benefit.addresses')}
            data={details.addresses.map((address, i) => (
              <p className={s.benefit__tag} key={i}>
                {address}
              </p>
            ))}
          />
        )}
      </div>
    </div>
  );
};