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

export const ForTeachingTab = forwardRef<HTMLDivElement>((_, ref) => (
  <div
    itemProp="forEducation"
    itemScope
    itemType="https://schema.org/TrainingsForEducation"
    ref={ref}
    className="overflow-hidden lg:ml-[129px] lg:h-[70vh] sm:h-[80vh] lg:min-w-[calc(100vw-129px)] h-[100vh] min-w-[100vw] sm:sticky -z-10 lg:top-[30vh] sm:top-[20vh] top-0 lg:px-10 lg:pt-10 sm:px-6 sm:pt-6 px-4 pt-4 lg:border-l bg-[#14161F] border-t border-[#3D425C]"
  >
    <div className="flex justify-between ">
      <h2 className="font-medium h2">
        Интерактивные тренажеры для учебных заведений
      </h2>
      <p className="h3 font-medium text-[#3D425C]">03</p>
    </div>
    <div className="flex justify-between max-sm:flex-col">
      <div className="lg:space-y-14 sm:space-y-10 space-y-6 sm:max-w-[calc(413/768*100vw)] lg:mt-14 sm:mt-10 mt-6">
        <div
          itemProp="creating"
          className="lg:space-y-7 space-y-4 lg:max-w-[40vw] flex-1"
        >
          <ForTeachingOption
            title="cоздание обучающих VR систем"
            description="Проведение виртуальных практических работ, создание учебных мастерских и стендов"
            type="teaching"
          />
          <ForTeachingOption
            title="cоздание VR лабораторий"
            description="Тренажер для проведения лабораториных работ позволит избежать
            поломки оборудования, а также экономить на расходных средствах"
            type="labs"
          />
          <p className="font-medium lg:text-2xl sm:text-xl">
            Оснащение учебных классов и центров всем необходимым для
            современного обучения под «ключ»
          </p>
        </div>
      </div>
      <img
        src="/images/products/teaching/teaching.png"
        className="max-sm:hidden w-[calc(685/1600*100vw)] sm:self-start"
        alt="обучение"
      />
      <img
        src="/images/products/teaching/teaching_mobile.png"
        className="mt-5 -mx-6 sm:hidden"
        alt="обучение"
      />
    </div>
  </div>
));

function ForTeachingOption({
  title,
  description,
  type,
}: {
  title: string;
  description: string;
  type: 'labs' | 'teaching';
}) {
  const ref = useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, {
    margin: `0px 0px ${(ref.current?.clientHeight ?? 0) - window.innerHeight}px`,
  });

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