import { useRef } from 'react';
import { getIcon } from '../../../../utils/getIcon';
import { motion, useInView } from 'framer-motion';

export function ForTeachingTab() {
  const titleRef = useRef<HTMLDivElement>(null);

  const titleInView = useInView(titleRef, { once: true, amount: 'all' });

  const textRef = useRef<HTMLDivElement>(null);

  const textInView = useInView(textRef, { once: true, amount: 'all' });

  const imgRef = useRef<HTMLDivElement>(null);

  const imgInView = useInView(imgRef, { once: true });

  return (
    <div
      itemProp="forEducation"
      itemScope
      itemType="https://schema.org/TrainingsForEducation"
      className="overflow-hidden lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 max-sm:py-4 max-lg:pb-4 bg-[#14161F] border-y border-[#3D425C]"
    >
      <motion.div
        ref={titleRef}
        initial={{ opacity: 0 }}
        animate={titleInView ? { opacity: 1 } : {}}
        transition={{ duration: 1.5, delay: 0.5 }}
        className="flex justify-between"
      >
        <h2 className="h2 font-medium">
          Интерактивные тренажеры для учебных заведений
        </h2>
        <p className="h3 font-medium text-[#3D425C]">03</p>
      </motion.div>
      <div className="max-sm:flex-col flex justify-between">
        <div className="sm:max-w-[calc(500/768*100vw)] mt-6">
          <div itemProp="creating" className="space-y-4 lg:max-w-[40vw] flex-1">
            <ForTeachingOption
              title="cоздание обучающих VR систем"
              description="Проведение виртуальных практических работ, создание учебных мастерских и стендов"
              type="teaching"
            />
            <ForTeachingOption
              title="cоздание VR лабораторий"
              description="Тренажер для проведения лабораториных работ позволит избежать
            поломки оборудования, а также экономить на расходных средствах"
              type="labs"
            />
            <motion.p
              ref={textRef}
              initial={{ opacity: 0 }}
              animate={textInView ? { opacity: 1 } : {}}
              transition={{ duration: 1, delay: 1 }}
              className="lg:text-2xl sm:text-xl font-medium"
            >
              Оснащение учебных классов и центров всем необходимым
              для современного обучения «под ключ»
            </motion.p>
          </div>
        </div>
        <motion.div
          initial={{ opacity: 0 }}
          animate={imgInView ? { opacity: 1 } : {}}
          transition={{ duration: 1, delay: 1 }}
          ref={imgRef}
          className="lg:-mr-10 sm:-mr-6 max-sm:-mx-6 max-sm:-mb-4 mt-5 -mr-4"
        >
          <img
            src="/images/products/teaching/teaching.png"
            className="max-sm:hidden w-[calc(685/1600*100vw)]"
            alt="обучение"
          />
          <img
            src="/images/products/teaching/teaching_mobile.png"
            className="sm:hidden -mx-6 mt-5 w-full"
            alt="обучение"
          />
        </motion.div>
      </div>
    </div>
  );
}

function ForTeachingOption({
  title,
  description,
  type,
}: {
  title: string;
  description: string;
  type: 'labs' | 'teaching';
}) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once: true, amount: 'all' });

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={inView ? { opacity: 1 } : {}}
      transition={{ duration: 1, delay: 1 }}
      ref={ref}
      className="flex sm:gap-x-7 items-start sm:max-lg:pr-3 max-sm:pb-4 max-sm:border-b border-[#3D425C]"
    >
      {getIcon(type, true, 'max-sm:hidden min-w-11')}
      <div className="lg:pl-4 sm:pl-[13px] sm:border-l border-[#3D425C] w-[90%]">
        <div className="sm:items-start sm:max-lg:flex-col max-sm:gap-x-2 flex items-center mb-1">
          {getIcon(type, inView, 'sm:hidden min-w-11')}
          <h4 className="lg:text-2xl sm:text-xl font-medium">{title}</h4>
        </div>
        <p className="l-text opacity-60">{description}</p>
      </div>
    </motion.div>
  );
}
