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

function TeachingItem({
  title,
  text,
  iconType,
  index,
}: {
  title: string;
  text: string;
  iconType: 'danger' | 'service' | 'safety';
  index: number;
}) {
  const ref = useRef<HTMLDivElement>(null);

  const rootInView = useInView(ref, {
    once: true,
    amount: 'all',
    // margin: `0px 0px -${window.innerHeight - (ref.current?.clientHeight ?? 0)}px`,
  });

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={rootInView ? { opacity: 1 } : {}}
      transition={{ duration: 1.5, delay: 0.5 + index / 4 }}
      itemProp={iconType}
      ref={ref}
      className="sm:border-l-0 max-sm:border-l-0 max-sm:first:border-t-0 max-sm:border-t border-[#3D425C] sm:flex lg:items-start sm:gap-x-7 max-sm:mr-4 max-sm:first:pt-0 max-sm:pt-4"
    >
      {getIcon(iconType, true, 'max-sm:hidden sm:max-lg:mb-[14px] min-w-11')}
      <div className="sm:border-l border-[#3D425C] sm:pl-4">
        <div className="max-sm:gap-x-2 flex items-center mb-2">
          {getIcon(iconType, rootInView, 'sm:hidden min-w-11')}
          <h4 className="lg:text-2xl sm:text-xl font-medium">{title}</h4>
        </div>
        <p className="l-text opacity-60">{text}</p>
      </div>
    </motion.div>
  );
}

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

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

  const imgRef = useRef<HTMLDivElement>(null);

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

  return (
    <div
      itemProp="industrial"
      itemScope
      itemType="https://schema.org/IndustrialTrainings"
      className="lg:px-10 lg:py-10 sm:px-6 sm:py-6 px-4 py-4 border-t border-[#3D425C] bg-[#14161F] overflow-hidden space-y-6 lg:space-y-14 sm:space-y-10"
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: titleInView ? 1 : 0 }}
        transition={{ duration: 1, delay: 0.5 }}
        ref={titleRef}
        className="flex justify-between items-center"
      >
        <h2 className="h2 w-full font-medium">Промышленные тренажеры</h2>
        <p className="h3 font-medium text-[#3D425C]">01</p>
      </motion.div>
      <div className="max-sm:items-center max-sm:flex-col flex justify-between">
        <div
          itemProp="education"
          itemScope
          itemType="https://schema.org/IndustrialTrainingsEducation"
          className="sm:space-y-7 space-y-4 xl:max-w-[max(450px,calc(507/1600*100vw))] lg:max-w-[440px] sm:max-w-[calc(379/768*100vw)]"
        >
          <TeachingItem
            iconType="danger"
            text="отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
            title="обучение навыкам работы на опасных производствах"
            index={0}
          />
          <TeachingItem
            iconType="service"
            text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
            title="обучение обслуживанию и ремонту оборудования, систем, техники"
            index={1}
          />
          <TeachingItem
            iconType="safety"
            text="отработка плана мероприятий по локализации и ликвидации последствий аварий"
            title="обучение правилам промышленной безопасности и охраны труда"
            index={2}
          />
        </div>
        <motion.div
          ref={imgRef}
          initial={{ opacity: 0 }}
          animate={imgInView ? { opacity: 1 } : {}}
          transition={{ duration: 1, delay: 1 }}
          className="lg:left-10 sm:left-6 lg:top-10 sm:top-6 relative bottom-0 top-4 left-4"
        >
          <img
            src="/images/products/trainings/trainings_desktop.png"
            className="object-cover lg:w-[calc(800/1600*100vw)] xl:max-w-[calc(1152/1600*100vw)] max-lg:hidden"
            alt="тренажеры"
          />
          <img
            src="/images/products/trainings/trainings_tablet.png"
            className="object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block"
            alt="тренажеры"
          />
          <img
            src="/images/products/trainings/trainings_mobile.png"
            className="sm:hidden object-cover object-center"
            alt="тренажеры"
          />
        </motion.div>
      </div>
    </div>
  );
}
