import { useState, Fragment } from "react";
import Image from "next/image";
import { useTranslation } from "next-i18next";
import uiuxImage from "../../public/tecnologias/uiux.svg";
import frontImage from "../../public/tecnologias/front.svg";
import backImage from "../../public/tecnologias/back.svg";
import engineImage from "../../public/tecnologias/engine.svg";
import ddbbImage from "../../public/tecnologias/ddbb.svg";
import cloudImage from "../../public/tecnologias/cloud.svg";
import cybersecurityImage from "../../public/tecnologias/cybersecurity.svg";
import bigdataImage from "../../public/tecnologias/bigdata.svg";
import ideaImage from "../../public/tecnologias/idea.svg";
import pentaquark from "../../public/pentaquark.png";
import {
  graphicDesigner,
  frontendDev,
  backendDev,
  dataScientist,
  dataEngineer,
  businessAnalyst,
  productOwner,
  devOps,
  cyberSecurityAnalist,
  scrumMaster,
  scientist,
} from "../data/profiles";

import {
  Amazon,
  Angular,
  Calypso,
  Cassandra,
  Cloudera,
  Docker,
  Fortify,
  Github,
  Hadoop,
  Impala,
  Ionic,
  Java,
  Jenkins,
  Jira,
  Javascript,
  Kafka,
  Mongodb,
  Mysql,
  Oracle,
  Php,
  Python,
  Qlik,
  React,
  Sas,
  Spark,
  Sqlserver,
  Html,
  Css,
  Tailwind,
  Figma,
  Vue,
  Nextjs,
  Googlecloud,
  DataBricks,
  Adobexd,
  Illustrator,
  Photoshop,
  AWS,
} from "../data/technologies";

import {
  AcademicCapIcon,
  UserIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";
import { Dialog, Transition } from "@headlessui/react";

const StackTech = ({ team }) => {
  const { t: translate } = useTranslation();

  return (
    <div className="bg-zinc-100 hidden xl:block">
      <div className="layout flex justify-center py-24">
        <div className="relative flex flex-col justify-center rounded-3xl w-148 h-148 bg-white shadow-md border-2 border-zinc-400 border-dashed">
          <div className="relative mx-auto bg-zinc-100 rounded-full w-128 h-128 border-2 border-zinc-400 border-dotted">
            <div className="hidden absolute top-8 left-8 w-108 h-108 blur-sm opacity-20">
              <Image
                className="w-108 h-108"
                src={pentaquark}
                alt={pentaquark}
              />
            </div>
            <CircleItem
              image={ideaImage}
              imageTitle="IDEA"
              profiles={[businessAnalyst, productOwner, scrumMaster]}
              position="-top-20 left-[12.5rem]"
              technologies={[Jira, Github]}
              team={team}
            />
            <CircleItem
              image={uiuxImage}
              imageTitle="UI/UX"
              profiles={[graphicDesigner, frontendDev]}
              position="top-20 -left-6"
              technologies={[Figma, Adobexd, Illustrator, Photoshop]}
              team={team}
            />
            <CircleItem
              image={frontImage}
              imageTitle="FRONTEND"
              profiles={[frontendDev, graphicDesigner]}
              position="bottom-4 left-4"
              technologies={[Html, Css, React, Angular, Vue, Nextjs, Tailwind]}
              team={team}
            />
            <div className="hidden absolute -top-12 -left-12 cursor-pointer w-20 h-20">
              <Image className="w-20 h-20" src={pentaquark} alt={pentaquark} />
            </div>
            <CircleItem
              image={backImage}
              imageTitle="BACKEND"
              profiles={[backendDev]}
              position="bottom-4 right-4"
              technologies={[Python, Java, Php]}
              team={team}
            />
            <CircleItem
              image={ddbbImage}
              imageTitle="DDBB"
              profiles={[dataEngineer, dataScientist]}
              position="top-20 -right-6"
              technologies={[
                Mongodb,
                Sqlserver,
                Mysql,
                Cassandra,
                Oracle,
                Qlik,
              ]}
              team={team}
            />
            <CircleItem
              image={cloudImage}
              imageTitle="CLOUD"
              profiles={[devOps, dataEngineer]}
              position="-bottom-12 -right-52"
              technologies={[Jenkins, Cloudera, Hadoop, AWS, Googlecloud]}
              team={team}
            />
            <div className="absolute bottom-1 -right-24 w-8 border-t-2 border-zinc-400 border-dashed"></div>
            <CircleItem
              image={engineImage}
              imageTitle="MOTOR"
              profiles={[scientist, dataScientist]}
              position="bottom-48 left-[12.5rem]"
              technologies={[Python, Sas]}
              team={team}
            />
            <div className="absolute bottom-1 -left-24 w-8 border-t-2 border-zinc-400 border-dashed"></div>
            <CircleItem
              image={cybersecurityImage}
              imageTitle="CIBERSEC."
              profiles={[cyberSecurityAnalist]}
              position="-bottom-12 -left-52"
              technologies={[React, Javascript]}
              team={team}
            />
            <div className="absolute top-4 -right-24 w-8 border-t-2 border-zinc-400 border-dashed"></div>
            <CircleItem
              image={bigdataImage}
              imageTitle="BIG DATA"
              profiles={[dataEngineer]}
              position="-top-12 -right-52"
              technologies={[Spark]}
              team={team}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

const CircleItem = ({
  image,
  imageTitle,
  position,
  profiles,
  technologies,
  team,
}) => {
  const { t: translate } = useTranslation();
  const [open, setOpen] = useState(false);

  return (
    <>
      <div
        onClick={() => setOpen(true)}
        className={`absolute ${position} flex flex-col group items-center cursor-pointer bg-white rounded-2xl w-28 p-3 border border-zinc-300 hover:border-zinc-400 hover:shadow-lg hover:bg-zinc-300 transition ease-in-out duration-300
        `}
      >
        <Image
          className="w-20 h-20 m-2 group-hover:scale-105 transition ease-in-out duration-300"
          src={image}
          alt={imageTitle}
        />
        <p className="font-cooperBold mt-2">{imageTitle}</p>
      </div>

      <Transition.Root show={open} as={Fragment}>
        <Dialog
          as="div"
          className="relative z-10"
          onClose={() => setOpen(false)}
        >
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
          </Transition.Child>

          <div className="fixed inset-0 z-10 overflow-y-auto">
            <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                enterTo="opacity-100 translate-y-0 sm:scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
              >
                <Dialog.Panel className="relative transform overflow-hidden rounded-xl bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
                  <div className="bg-white p-5">
                    <div className="flex justify-between items-start w-full">
                      <div className="flex h-full">
                        <div className="flex flex-col justify-start items-center mb-2">
                          <Image
                            className="w-12 h-12"
                            src={image}
                            alt={imageTitle}
                          />
                          <div>
                            <Dialog.Title as="h4" className="font-bold">
                              {translate(imageTitle)}
                            </Dialog.Title>
                          </div>
                        </div>
                        <div className="border-r mx-4 border-zinc-300 w-1" />
                        <div>
                          <p className="text-xl font-bold mx-auto  pl-2">
                            {translate(team ? "PROFILES" : "TECHNOLOGIES")}
                          </p>
                          <div className="border-b h-1 border-zinc-300 mb-4" />

                          {team ? (
                            <div>
                              {profiles.map((profile, index) => {
                                return (
                                  <div key={index} className="mb-4 last:mb-0">
                                    <div className="flex justify-start items-center mt-2">
                                      <UserIcon
                                        className="h-5 w-5 mr-2"
                                        aria-hidden="true"
                                      />
                                      <p className="font-bold text-lg font-cooperBold">
                                        {translate(profile.title)}
                                      </p>
                                    </div>
                                    <p className="text-gray-500 ml-7">
                                      {translate(profile.description)}
                                    </p>
                                  </div>
                                );
                              })}
                            </div>
                          ) : (
                            <div className="flex justify-start flex-wrap">
                              {technologies.map((technology, index) => {
                                return (
                                  <div key={index} className="mx-4 mb-4">
                                    <Image
                                      src={technology.image}
                                      alt={technology.name}
                                      className="h-20 w-20"
                                    />
                                  </div>
                                );
                              })}
                            </div>
                          )}
                        </div>
                      </div>
                      <button
                        className="focus:outline-none mx-auto flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full hover:bg-zinc-100 sm:mx-0 sm:h-8 sm:w-8"
                        onClick={() => setOpen(false)}
                      >
                        <XMarkIcon
                          className="h-4 w-4 text-zinc-400 "
                          aria-hidden="true"
                        />
                      </button>
                    </div>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition.Root>
    </>
  );
};

export default StackTech;
