import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { AppearanceText } from '../../ui/AppearanceText';
import { Title } from '../../ui/Title';
import { useHover } from 'usehooks-ts';
import { getIcon } from '../../utils/getIcon';

export function MultiUser() {
  return (
    <div
      itemScope
      itemType="http://schema.org/MultiUser"
      className="lg:py-[100px] py-14 sm:grid lg:grid-cols-12 sm:grid-cols-3"
    >
      <Title className="row-start-1 mb-6 lg:mb-14 col-span-full">
        <span className="text-gradient text-wrap">Многопользовательский </span>
        <br className="lg:hidden" />
        режим обучения
      </Title>
      <div className="max-lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/images/availables/image.jpg)] bg-cover bg-no-repeat bg-[left_top_-1px]" />
      <div
        itemProp="multiUserFeatures"
        itemScope
        itemType="http://schema.org/MultiUserFeatures"
        className="grid max-lg:col-span-full sm:max-lg:row-start-2 lg:col-span-6 lg:row-span-2 lg:grid-cols-2 sm:grid-cols-3 lg:grid-rows-2 lg:-mr-10 max-lg:-mx-6"
      >
        <MultiUserFeature
          type="processes"
          text="отработка производственных процессов, в которых участвует группа людей"
        />
        <MultiUserFeature
          type="plans"
          text="командная отработка планов мероприятий по локализации и ликвидации последствий аварий"
        />
        <MultiUserFeature
          type="teamwork"
          text="координация действий между несколькими сотрудниками"
        />
      </div>
      <div className="lg:hidden lg:col-span-6 col-start-1 lg:row-span-2 sm:col-span-3 lg:row-start-2 sm:row-start-3 sm:row-span-1 bg-[url(/images/availables/image.jpg)] bg-cover bg-no-repeat bg-center sm:aspect-[728/356] aspect-[3/2] max-sm:-mx-6" />
      <AppearanceText
        className="col-span-7 col-start-1 mt-8 lg:col-span-6 max-lg:mt-6"
        splits={[
          'В одном ',
          'цифровом ',
          'пространстве ',
          'могут работать ',
          'сотрудники, ',
          'находящиеся ',
          'в разных ',
          'помещениях, ',
          'зданиях ',
          'или городах',
        ]}
      />
    </div>
  );
}

function MultiUserFeature({
  text,
  type,
}: {
  text: string;
  type: 'processes' | 'plans' | 'teamwork';
}) {
  const ref = useRef<HTMLDivElement>(null);
  const hovered = useHover(ref);
  const isInView = useInView(ref, {
    margin: `0px 0px ${(ref.current?.clientHeight ?? 0) - window.innerHeight}px`,
  });

  return (
    <div
      itemProp={type}
      ref={ref}
      className="max-sm:border-t max-sm:last:border-b sm:max-lg:border-y max-h-60 sm:max-lg:[&:not(:last-child)]:border-r bg-right-bottom bg-no-repeat flex flex-col bg-[url(/images/availables/highlight.jpg)] bg-[length:0%_0%] lg:hover:bg-[length:100%_100%] transition-all sm:min-h-[280px] duration-300 w-full justify-between items-start px-10 py-6 lg:border-t lg:first:border-r lg:last:border-b border-[#3D425C] col-span-1 lg:last:col-span-2 max-sm:aspect-[3/2]"
    >
      <div className="max-lg:hidden">
        {getIcon(type, hovered, 'mb-4 max-lg:hidden w-14 h-14')}
      </div>
      <div className="lg:hidden">
        {getIcon(type, isInView, 'mb-4 lg:hidden w-14 h-14')}
      </div>
      <p className="l-text">{text}</p>
    </div>
  );
}