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

import CardCareers from '../components/CardCareers';
import Contact from '../components/shared/Contact';

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/CardCareers2';
import OrbitOnScroll from '../components/shared/graphics/OrbitOnScroll';
import PageLayout from '../layout/PageLayout';

// eslint-disable-next-line no-underscore-dangle
const _data = {
  heading: {
    heading: 'Join Our Team of Diligent Minds',
    subheading: 'Careers',
  },
  job: {
    cards: [
      {
        nugget: '.Net',
        role: '.Net Developer',
        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.',
      },
    ],
  },
  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.",
      },
    ],
  },
  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: 'Contact Us and Step up Your Career!',
    paragraph:
      'We are continuously on the lookout for talented people to grow our business.',
    paragraph2: "Don't be shy - Apply!",
    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(() => {
    document.title = 'Careers';
  }, []);

  useEffect(async () => {
    var vid = document.getElementById('animation');
    vid.playbackRate = 2;
    axios
      .get(
        `${api_url}/api/careerspage?populate[0]=heading&populate[1]=info&populate[2]=job.icon`,
      )
      .then(res => {
        //console.log(res.data.data.attributes);
        setCntCareers(res.data.data.attributes);
        setIsLoaded(true);
      })
      .catch(err => {
        console.log(err);
        setIsLoaded(false);
      });
  }, []);

  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">
        <Wrapper padding={' py-90p'}>
          <h1 className="hidden">Careers - Join our Team</h1>
          <PageTitle
            heading={_data.heading.heading}
            subheading={_data.heading.subheading}
            left
            color
          />
        </Wrapper>
        <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">
              {/* {cntCareers.job.map(job => (
            <div key={job.id}>
              <CardCareers 
              image={job.icon.data.attributes.url}
              heading={job.heading}
              paragraph={job.paragraph}
              requirements_heading={job.requirements_heading}
              requirements_paragraph={job.requirements_paragraph}
              expectations_heading={job.expectations_heading}
              expectations_paragraph={job.expectations_paragraph}
              benefits_heading={job.benefits_heading}
              benefits_paragraph={job.benefits_paragraph}
              hash_position={job.position}
              setClickedPosition={setClickedPosition}
            />
              </div>
            
          ))} */}
              <CardCareers2 cards={_data.job.cards} />
            </div>
          </section>
        </Wrapper>
        <Wrapper bg padding={' py-90p'}>
          <PageTitle
            left
            heading={_data.life.heading}
            subheading={_data.life.subheading}
          />

          <div className="my-90p">
            <div className="my-90p">
              <h3 className="title-italic">{_data.life.italic.heading}</h3>
              <p className="paragraph">{_data.life.italic.paragraph}</p>
              <div className="w-full py-90p">
                <iframe
                  className="m-auto w-[300px] h-[180px] md:w-[500px] md:h-[400px] lg:w-[800px] lg:h-[560px]"
                  src="https://www.youtube.com/embed/PFHIqqHRS4s?controls=0"
                  title="YouTube video player"
                  frameBorder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                ></iframe>
              </div>
            </div>
            <h3 className="title-italic">{_data.life.italic.heading2}</h3>
          </div>

          <div className="">
            <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>
        <Wrapper 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>
        <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'}
              text2={_data.ActionCard.paragraph2}
            />
          </div>
        </Wrapper>
      </div>
    </PageLayout>
  );
}
