import { useState, useEffect } from 'react';
import axios from 'axios';

import ImgStep1 from '../assets/images/CaseStudy/CentralizedSmall.png';
import ImgEvents from '../assets/images/Careers/events.png';

import Care from './../assets/icons/values/care.svg';
import Doing from './../assets/icons/values/doing.svg';
import Culture from './../assets/icons/values/culture.svg';
import Ideas from './../assets/icons/values/ideas.svg';

import CardsGrid from '../components/CardsGrid';

import Animation_Diligent from '../assets/animation_diligent.webm';
import Wrapper from '../layout/Wrapper';
import PageTitle from '../components/shared/PageTitle';
import HighlighedText from '../components/shared/HighlighedText';
import CardValues from '../components/shared/CardValues';
import CardLife from '../components/shared/CardLife';
import ActionCard from '../components/shared/ActionCard';
import AboutUsSlider from '../components/shared/AboutUsSlider';
import CardCareers2 from '../components/CareerCardsTemplates/CardCareers2';
import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
import PageLayout from '../layout/PageLayout';
import TimelineCard from '../components/TimelineCard';

import { useNavigate } from 'react-router-dom';
//import useAnalytics from '../hooks/useAnalytics';

// eslint-disable-next-line no-underscore-dangle
const _data = {
  heading: {
    heading: 'Join Our Team of Diligent Minds',
    subheading: 'Careers',
  },
  selectionProcess: {
    stepOne: {
      heading: 'Application',
      paragraph:
        'You consider Diligent to be the best fit for your professional growth? Send us your CV now! All open positions and information on how to apply are listed on our website. If you require additional details? For any questions, please contact us at hr@dilig.net.',
    },
    stepTwo: {
      heading: 'Preselection',
      paragraph:
        'The HR team, as well as the team leader of the team for which you are applying, will check your CV. It is a top priority for the HR team! Following that, you will receive a phone call from us with the option to agree on the next stage of selection, which can be done online or in person at our office.',
    },
    stepThree: {
      heading: 'HR interview',
      paragraph:
        'Let’s get to know each other! We will give you a brief introduction to our business, culture, and working environment during the interview with the recruiter. We will discuss your job history, interests, and ambitions for advancing your professional career together. We’ll also respond to any inquiries you might have for us.',
    },
    stepFour: {
      heading: 'Technical interview',
      paragraph:
        'In order to better evaluate your level of technical expertise, you will discuss your project experiences with our experienced engineers, answer questions regarding the technology you worked on, and complete a task (depending on the role).',
    },
    stepFive: {
      heading: 'Feedback',
      paragraph:
        'Feedback is the final step in our selection procedure. You will receive general feedback regarding your interview. If we are a match, we will send you an offer and specify the working conditions.',
    },
  },
  job: {
    NetDev: {
      id: 1,
      templateFlag: 1,
      role: '.Net Developer',
      nugget: '.Net',
      shortDetails:
        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
      extended: {
        paragraph:
          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
        requirements: [
          'Good software development fundamentals and knowledge of .NET architecture concepts & patterns',
          'Good knowledge of software design patterns',
          'Good knowledge of databases and database design',
          'Experience in working with microservices is a big plus',
          'The ability to work in a big team but also to work independently',
          'Excellent communication skills',
        ],
        key: [
          'Working as a full-stack developer on various project and products',
          'Working with 3rd-party APIs',
          'Working on different integration scenarios',
          'Setting up project structure and architecture',
          'Being involved in full project development, from writing a specification to deploying a finished product',
        ],
        offer: [
          'Full Remote position',
          'A fast-growth company with stable projects and strong international clients',
          'Opportunity to work in teams with experienced engineers',
          'Competitive employment conditions',
          'An environment that will make you feel good about your job',
          'Challenging and diverse projects',
          'Support in your personal and professional growth',
          'Flexible working hours',
          'Private health insurance',
        ],
      },
    },
    NetDevIntern: {
      id: 2,
      templateFlag: 2,
      role: '.Net Developer Internship',
      nugget: '.NetInernship',
      shortDetails:
        'An idea solves a problem. We help you to create that idea, build a product and scale it to be successful in your business.',
      extended: {
        paragraph:
          'Team Diligent is constantly growing! We are looking for a team player that will work with experienced engineers. If technology is your passion and you are ready to move the boundaries of your knowledge every day, then, Diligent is the right place for you. If you are not from Niš, we are offering a full remote position.',
        offer: [
          'Paid internship',
          'Full Remote position',
          'A fast-growth company with stable projects and strong international clients',
          'Experience of working in a team',
          'Work on real project with real clients',
          'Mentorship from industry leaders',
          'Support in your personal and professional growth',
          'Lots of team activities and perks',
          'Modern working place with a positive and fun atmosphere',
        ],
        requirements: [
          'Fundamentals of data structures ',
          'Fundamentals and knowledge of .NET architecture concepts & patterns',
          'Fundamentals of databases and database design',
          'Team player and fast learner',
          'Analytical and problem-solving skills',
        ],
        selectionProcess: [
          'Application',
          'CV Screening',
          'HR Interview',
          'Technical Interview',
          'Internship - offer & contract',
        ],
        conslusionParagraph:
          'At the end of the selection process, we will select interns able to join our team for a 3 months internship and arrange the beginning of the practice personally with you.',
      },
    },
  },
  life: {
    heading: 'A Culture That’s Serious About Work and Fun',
    subheading: 'Diligent life',
    italic: {
      heading: 'Life At diligent',
      paragraph:
        'From the start, you can expect to be challenged and supported. We provide a encouraged atmosphere with knowledgeable mentors to help you advance in your career.  To create an inspiring work life, we collaborate as a team both inside and outside of the office.',
      heading2: 'What It Means to Work With Us',
    },
    cards: [
      {
        id: 1,
        title: 'Shape the Future',
        paragraph:
          'We collaborate with business leaders and entrepreneurs to disrupt and push their industries forward. From startup ideas to enterprise-level product & software development, we work together as a team to transform our clients’ ideas into reality.',
      },
      {
        id: 2,
        title: 'Life-Long Learning',
        paragraph:
          'We believe that learning is a journey that never ends. With us, you will have the opportunity to continuously learn in an environment surrounded by other highly skilled professionals with decades of experience.  Also, there are several chances for you to develop through the use of various technologies, involvement in the product definition process, conference attendance, and more.',
      },
      {
        id: 3,
        title: 'A Unique Culture',
        paragraph:
          'Everyone talks about a work-life balance, we do it - for two reasons. Firstly, we believe in an environment of happy people. Secondly, even if you’re highly productive, the only way to maintain productivity long-term is by taking time for the things that make you happy.',
      },
      {
        id: 4,
        title: 'Make the Impossible Better',
        paragraph:
          "If you have a mindset that is continuously focused on pushing through and beyond your boundaries, conquering a whole new challenge every day in an atmosphere where you constantly learn and improve, this is the place for you. We'd love to learn more about you.",
      },
    ],
  },
  values: {
    heading: 'Benefits',
    cards: [
      {
        id: 0,
        iconUrl: Care,
        title: 'Care',
        paragraph:
          'We believe that by working together and being kind to one another, we can make a difference. We care about work colleagues, ourselves, partnerships, but also the planet. We constantly strive to be helpful, kind, and inclusive in everything we do and looking for ways to be more sustainable. ',
      },
      {
        id: 1,
        iconUrl: Culture,
        title: 'Culture',
        paragraph:
          'Our people love what they do. We provide a fun and supportive environment that empowers our staff to grow, learn, and thrive. We are consistent and transparent in our actions and committed to our clients and colleagues. We believe that together we can achieve more.',
      },
      {
        id: 2,
        iconUrl: Doing,
        title: 'Learn by Doing',
        paragraph:
          'Our legacy is our impact on the people around us. By being kind and helping others, we can make a positive difference and leave a lasting impression. We grow as individuals, as well as we grow as a team.',
      },
      {
        id: 3,
        iconUrl: Ideas,
        title: 'Ideas Over Hierarchy',
        paragraph:
          'We believe that the best ideas can come from anywhere, both inside and outside our company. Our job is to seek out those ideas, shape and improve them through candid debate, and take them from concept to action.',
      },
    ],
  },
  cards: [
    {
      id: 0,
      title: 'BI Healthcare Solution System',
      imgUrl:
        'https://lh6.googleusercontent.com/D7N87i3udAln4YBp5SbaSI-9r2pVnnT5K2VT6p0G3dQanVgTMC2tdgz71PWOYco-7yQ=w2400',
      alt: 'BI Healthcare Solution System',
      link: '/casestudybi',
    },
    {
      id: 1,
      title: 'Resource Planning System',
      imgUrl:
        'https://lh5.googleusercontent.com/HLOh5coHfcEgDuftj1pOA9f1865xiIom5vyxTWNMKqMiivxL8Lg4c9ACzbfYYUdeuqQ=w2400',
      alt: 'Resource Planning System',
      link: '/casestudyresource',
    },
    {
      id: 2,
      title: 'Ticketing System for Passengers',
      imgUrl:
        'https://lh5.googleusercontent.com/f_G0H0C_qLHhsU8PBj6uTkNigzKiXzd24B_pgJ6UqVmBKlU2Lyxv2r5lf6uvY9d_0PY=w2400',
      alt: 'Ticketing System for Passengers',
      link: '/casestudyticketing',
    },
  ],
  connect: {
    heading: 'Connect and Grow With Us',
    paragraph:
      'At Diligent, we are passionately proud of our culture and feel that everyone, including those who are not yet on the team, should have the opportunity to experience it. Because of this, we participate in Open Doors. Our coworkers are actively involved in the local tech communities. We take satisfaction in giving back as well, assisting college students or seasoned professionals who want to start a career in IT.',
    subtitle: 'Check out how we have fun together!',
    sliderImages: [],
  },
  ActionCard: {
    heading: 'Step up Your Career!',
    paragraph:
      'We are continuously on the lookout for talented people to grow our business.',
    primaryBtn: 'Apply',
    secondaryBtn: 'About Us',
  },
};

export default function Careers({ forwardedRef }) {
  const [clickedPosition, setClickedPosition] = useState('');
  const [cntCareers, setCntCareers] = useState('');
  const [isLoaded, setIsLoaded] = useState('');

  const api_url = process.env.REACT_APP_API_URL;

  useEffect(() => {
    const stepsContainer = document.querySelector('#steps-container');
    const stepsImage = document.querySelector('#steps-image');
    console.log(stepsImage);

    function isInViewport(el) {
      const rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    }

    document.addEventListener(
      'scroll',
      function () {
        const stepsImageSrc = isInViewport(stepsContainer)
          ? 'https://images.unsplash.com/photo-1588689195067-cb368b2da826?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80'
          : 'https://images.unsplash.com/photo-1588689194901-a1fb731a43e1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=721&q=80';

        stepsImage.src = stepsImageSrc;
      },
      {
        passive: true,
      },
    );
  }, []);

  useEffect(() => {
    document.title = 'Careers';
  }, []);

  //useAnalytics();

  useEffect(async () => {
    var vid = document.getElementById('animation');
    vid.playbackRate = 2;
    axios
      .get(
        `${api_url}/api/n-careerspage?populate[0]=diligent_life&populate[1]=diligent_life.heading_section&populate[2]=diligent_life.CTO&populate[3]=diligent_life.media_text.media&populate[4]=selection_process.heading&populate[5]=selection_process.steps.media&populate[6]=positions_heading&populate[7]=positions_card.Image&populate[8]=benefits_heading&populate[9]=benefits_card.media`,
      )
      .then(res => {
        //console.log(res.data.data.attributes);
        setCntCareers(res.data.data.attributes);
        setIsLoaded(true);
      })
      .catch(err => {
        console.log(err);
        setIsLoaded(false);
      });
  }, []);

  const link = useNavigate();

  if (!isLoaded) {
    return (
      <div className="z-50 w-full h-screen bg-white dark:bg-dg-primary-1700 dark:text-white flex items-center justify-center text-3xl font-semibold">
        <video id="animation" width="540" height="540" autoPlay muted loop>
          <source src={Animation_Diligent} type="video/webm" />
          Loading...
        </video>
      </div>
    );
  }

  return (
    <PageLayout>
      <div className="bg-white dark:bg-dg-primary-1700 w-full pt-90p overflow-hidden">
        {/* Diligent Life */}
        <Wrapper padding={' py-90p'}>
          <PageTitle
            left
            heading={cntCareers.diligent_life.heading_section.heading}
            subheading={cntCareers.diligent_life.heading_section.subheading}
          />

          <div className="my-20p">
            <div>
              <p className="paragraph">
                {cntCareers.diligent_life.heading_section.paragraph}
              </p>
              <div className="w-full py-72p">
                <iframe
                  className="m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[960px] lg:h-[540px]"
                  src={cntCareers.diligent_life.heading_section.link}
                  title="YouTube video player"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                ></iframe>
              </div>
            </div>
          </div>

          <div className="flex flex-col md:flex-row items-center justify-center gap-8">
            <p className="paragraph w-full md:w-1/2 lg:w-3/4">
              {cntCareers.diligent_life.CTO.cto_paragraph}
            </p>
            <button className="btn-secondary" onClick={() => link('/diligentlife')}>
              {cntCareers.diligent_life.CTO.cto_button}
            </button>
          </div>

          <div className="hidden">
            <section
              id="life"
              className="dark:bg-dg-primary-1700 flex flex-row items-center justify-center"
            >
              <div className="flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full">
                  {_data.life.cards.map((item, index) => (
                    <CardLife
                      key={index}
                      number={item.id}
                      heading={item.title}
                      paragraph={item.paragraph}
                    />
                  ))}
                </div>
              </div>
            </section>
          </div>
        </Wrapper>

        {/* Selection Process */}
        <Wrapper bg padding={' py-90p'}>
          <PageTitle
            left
            heading={cntCareers.selection_process.heading.heading}
            subheading={cntCareers.selection_process.heading.subheading}
          />
          <div className="no-scroll flex flex-col items-center justify-start overflow-auto h-[75vh] pt-72p pl-3">
            {/* Dynamic Image */}
            <img
              id="steps-image"
              src={ImgStep1}
              alt="Image not found"
              className="absolute top-1/4 left-1/2 w-2/5 bg-fixed"
            />

            {cntCareers.selection_process.steps.map((item, index) => (
              <>
                {/* Section */}
                <div
                  id={item.id}
                  className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]"
                >
                  {/* Line */}
                  <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
                  {/* Dot */}
                  <div className="z-10 p-[0.36rem] rounded-full bg-white border-solid border border-dg-primary-900 absolute -left-[0.63%] top-[1%]"></div>
                  <div className="w-1/2 ml-8">
                    <h3 className="h3-heading">{item.heading}</h3>
                    <p className="text-sm text-dark-gray dark:text-white mt-4">
                      {item.paragraph}
                    </p>
                    {item.cto != null && (
                      <button className="btn-secondary mt-6">{item.cto}</button>
                    )}
                  </div>
                  <div className="w-1/2"></div>
                </div>
              </>
            ))}
          </div>
        </Wrapper>

        {/* Main Heading */}
        <Wrapper padding={' py-90p'}>
          <h1 className="hidden">Careers - Join our Team</h1>
          <PageTitle
            heading={cntCareers.positions_heading.heading}
            subheading={cntCareers.positions_heading.subheading}
            left
            color
          />
        </Wrapper>

        {/* Open Positions */}
        <Wrapper padding={' py-90p'}>
          <div className="absolute hidden -ml-64 md:block">
            <OrbitOnScroll />
          </div>
          <section
            id="jobs"
            className="flex items-center justify-center max-w-custom m-auto"
          >
            <div className="w-full">
              <CardCareers2 cards={_data.job} />
            </div>
          </section>
        </Wrapper>

        {/* Benefits Section */}
        <Wrapper bg padding={' py-90p'}>
          <section id="values" className="flex flex-row items-center justify-center">
            <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto px-8 xl:px-0">
              <h2 className="heading text-dg-secondary">{cntCareers.benefits_heading.heading}</h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-16 w-full mt-8">
                {cntCareers.benefits_card.map((item, index) => (
                  <CardValues
                    key={index}
                    image={item.media}
                    heading={item.heading}
                    paragraph={item.paragraph}
                  />
                ))}
              </div>
            </div>
          </section>
        </Wrapper>

        {/* Diligent Minds */}
        <div className="hidden">
          <Wrapper padding={' py-90p'}>
            <PageTitle
              left
              heading="Personal Development & Success Stories"
              subheading="Diligent Minds"
            />
            <Wrapper padding={' py-72p'}>
              <CardsGrid data={_data.cards} />
            </Wrapper>
            <div className="flex flex-col md:flex-row items-center justify-center gap-8">
              <p className="paragraph w-full md:w-1/2 lg:w-3/4">
                If you have a mindset that is continuously focused on pushing through and
                beyond your boundaries, conquering a whole new challenge every day in an
                atmosphere where you constantly learn and improve, this is the place for
                you. We'd love to learn more about you.
              </p>
              <button className="btn-secondary" onClick={() => link('/diligentminds')}>
                Read More
              </button>
            </div>
          </Wrapper>
        </div>

        {/* Event's Timeline */}
        <div className="hidden">
          <Wrapper padding={' py-90p'}>
            <PageTitle left heading="Event's Timeline" subheading="Events" />
            <div className="mt-20p flex flex-col gap-8 items-center justify-center">
              <p className="paragraph">
                The main objective is to create a solution that meets the requirements of
                stakeholders while integrating with existing IT systems to get data
                without impacting the system. The solution should use only an MS stack of
                technologies while taking care of sensitive data, and maintaining and
                providing up-to-date data. The solution should also be a comfortable and
                reliable, user-friendly solution for everyday work.
              </p>
              <div className="w-screen">
                <AboutUsSlider />
              </div>
              <button className="btn-secondary" onClick={() => link('/eventstimeline')}>
                Find Out More
              </button>
            </div>
          </Wrapper>
        </div>

        {/* Action Card */}
        <Wrapper>
          <div className="my-90p">
            <ActionCard
              title={_data.ActionCard.heading}
              text={_data.ActionCard.paragraph}
              btn1={_data.ActionCard.primaryBtn}
              btn2={_data.ActionCard.secondaryBtn}
              link1={'/contact'}
              link2={'/about'}
            />
          </div>
        </Wrapper>

        {/* Other */}
        <div className="hidden">
          <Wrapper bg padding={' py-90p'}>
            <PageTitle heading={_data.connect.heading} color />
            <p className="paragraph my-32p">{_data.connect.paragraph}</p>
          </Wrapper>
          <Wrapper>
            <section id="highlight" className="flex flex-col items-center justify-center">
              <HighlighedText text={_data.connect.subtitle} />
            </section>
          </Wrapper>
          <Wrapper>
            <AboutUsSlider />
          </Wrapper>
        </div>
      </div>
    </PageLayout>
  );
}
