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

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

  const isInView = useInView(ref, {
    margin: `0px 0px -${window.innerHeight - (ref.current?.clientHeight ?? 0)}px`,
  });

  return (
    <div
      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="flex items-center mb-2 max-sm:gap-x-2">
          {getIcon(iconType, isInView, 'sm:hidden min-w-11')}
          <h4 className="font-medium lg:text-2xl sm:text-xl">{title}</h4>
        </div>
        <p className="l-text opacity-60">{text}</p>
      </div>
    </div>
  );
}

export const IndustrialTab = forwardRef<HTMLDivElement, { sticked: boolean }>(
  ({ sticked }, ref) => (
    <div
      itemProp="industrial"
      itemScope
      itemType="https://schema.org/IndustrialTrainings"
      ref={ref}
      className="sm:sticky top-0 min-h-[100vh] min-w-[100vw] lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 border-t border-[#3D425C] bg-[#14161F] -z-30 max-sm:flex flex-col items-center gap-y-4"
    >
      <div className="space-y-6 lg:space-y-14 sm:space-y-10">
        <div
          className={
            'flex justify-between items-center' +
            (sticked ? ' text-[#3D425C] transition-colors' : '')
          }
        >
          <h2 className="w-full font-medium h2">Промышленные тренажеры</h2>
          <p className="h3 font-medium text-[#3D425C]">01</p>
        </div>
        <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)]' +
            (sticked ? ' transition-opacity opacity-0' : ' opacity-100')
          }
        >
          <TeachingItem
            iconType="danger"
            text="отработка проведения технологических операций: оказание первой помощи, работы на высоте, работа с доменной печью и т.п."
            title="обучение навыкам работы на опасных производствах"
          />
          <TeachingItem
            iconType="service"
            text="отработка определения неисправностей оборудования и выполнения ремонтных работ на цифровом двойнике"
            title="обучение обслуживанию и ремонту оборудования, систем, техники"
          />
          <TeachingItem
            iconType="safety"
            text="отработка плана мероприятий по локализации и ликвидации последствий аварий. "
            title="обучение правилам промышленной безопасности и охраны труда"
          />
        </div>
      </div>
      <img
        src="/images/products/trainings/trainings_desktop.png"
        className={
          'absolute right-0 top-[121px] object-cover lg:w-[calc(1000/1600*100vw)] xl:w-[calc(1152/1600*100vw)] max-lg:hidden ' +
          (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
        }
        alt="тренажеры"
      />
      <img
        src="/images/products/trainings/trainings_tablet.png"
        className={
          'absolute right-0 top-[120px] object-cover w-[calc(438/768*100vw)] hidden sm:max-lg:block ' +
          (sticked ? 'transition-opacity opacity-0' : 'opacity-100')
        }
        alt="тренажеры"
      />
      <img
        src="/images/products/trainings/trainings_mobile.png"
        className="object-cover object-center sm:hidden"
        alt="тренажеры"
      />
    </div>
  ),
);
