import React, { useEffect, useState } from 'react'
import PortableText from 'react-portable-text'
import axios from 'axios'
import { NextSeo } from 'next-seo'
import { format } from 'date-fns'
import { Fade, Slide } from 'react-awesome-reveal'
import {
  IoCalendarClearOutline,
  IoBriefcaseOutline,
  IoPaperPlaneOutline,
} from 'react-icons/io5'

import HeaderImage from '../components/Header/HeaderImage'
import Container from 'components/BlogContainer'
import CTA from 'components/Cta'
import Layout from 'components/Layout'
import {
  Button,
  Dialog,
  DialogHeader,
  DialogBody,
  DialogFooter,
} from '@material-tailwind/react'
import Link from 'next/link'

export interface CareerProps {
  preview?: boolean
  loading?: boolean
}

export default function Career(props) {
  //modal window
  const [open, setOpen] = React.useState(false)
  const handleOpen = () => setOpen(!open)

  //console.log(props)
  const { loading, preview } = props
  const [dataHeader, setDataHeader] = useState({})
  const [dataCareer, dataContentSet] = useState([])

  useEffect(() => {
    const contentLoad = async function () {
      let data = await axios.get('/api/career')
      let dt = data.data
      let hD = {
        title: dt.title,
        subTitle: dt.subtitle,
        imageUrl: 'https://cdn.sanity.io/' + dt.coverImage,
      }

      //console.log('datanya: ', data)

      let ev = dt.career.map((x, i) => {
        let r = x
        let dt = []
        ;(function deep(v, l) {
          for (let i = 0; i < l; i++) {
            Object.keys(v[i]).forEach(function (f) {
              if (f == 'children') {
                deep(v[i][f], v[i][f].length)
              } else if (f == 'text') {
                dt.push(v[i][f])
              }
            })
          }
        })(r.content, r.content.length)
        r.text = dt.join(' ')
        return r
      })

      //console.log(ev)
      setDataHeader(hD)
      dataContentSet(ev)
    }
    contentLoad()
  }, [])

  return (
    <>
      <NextSeo
        title="Career & Opporturnity - GWK Cultural Park Bali"
        description="Career & Opportunity at Garuda Wisnu Kencana "
        additionalLinkTags={[
          {
            rel: 'icon',
            href: '../favicon/favicon.ico',
          },
        ]}
        openGraph={{
          title: 'Career & Opportunity - GWK Cultural Park Bali',
          description: 'Career & Opportinity at Garuda Wisnu Kencana ',
          url: 'https://www.gwkbali.com/career',
          type: 'article',
          article: {
            section: 'Career & Opportunity',
          },
          images: [
            {
              url: '/images/857e740d071d5f8b4d54934905ee671445f6670d-3751x2501.jpg',
              //url: 'https://cdn.sanity.io/images/helyis1v/production/857e740d071d5f8b4d54934905ee671445f6670d-3751x2501.jpg',
              width: 850,
              height: 650,
              alt: 'Career & Opportunity - GWK Cultural Park Bali',
            },
          ],
        }}
      />
      <div>
        <Layout loading={loading} preview={preview}>
          <HeaderImage dat={dataHeader} />

          <Container>
            <div className="pt-10 sm:p-0 md:p-10">
              <div className="grid">
                {(function (data) {
                  return data.map((df, i) => {
                    if (df.title.toLocaleLowerCase().indexOf('other') == -1) {
                      var ty = Number(i)
                      var pop = ty % 2
                      if (pop === 0) {
                        return (
                          <Fade key={i} duration={1200} delay={300} triggerOnce>
                            <div
                              key={i}
                              className="container mb-20 overflow-hidden rounded-md border bg-stone-50 p-0"
                            >
                              <div className="row g-0">
                                <div
                                  className="min-h-[400px] sm:col-12 md:col-6"
                                  style={{
                                    backgroundImage:
                                      'url("https://cdn.sanity.io/' +
                                      df.coverImage +
                                      '")',
                                    backgroundSize: 'cover',
                                    backgroundRepeat: 'no-repeat',
                                    backgroundPosition: 'center',
                                    overflow: 'hidden',
                                  }}
                                ></div>
                                <div className="sm:col-12 md:col-6">
                                  <div className="pb-5 pl-10 pr-10 pt-10 sm:pb-10 sm:pl-10 sm:pr-10 sm:pt-10">
                                    <h2 className="heading-h2 mb-5 text-4xl font-semibold leading-tight sm:text-5xl">
                                      {df.title}
                                    </h2>
                                    {/* <div>{parser(df.text)}</div> */}
                                    <div className="pb-5 text-stone-600">
                                      <span className="inline-grid grid-cols-3 gap-3">
                                        <span className="inline-flex items-start">
                                          <IoCalendarClearOutline />
                                          <span className="pl-2 font-sans text-sm">
                                            {format(
                                              new Date(df.date),
                                              'dd-MM-yyyy'
                                            )}
                                          </span>
                                        </span>
                                        <span className="inline-flex items-start">
                                          <IoBriefcaseOutline />
                                          <span className="pl-2 font-sans text-sm">
                                            {df.jobtype}
                                          </span>
                                        </span>
                                        <span className="inline-flex items-start">
                                          <IoPaperPlaneOutline />
                                          <span className="pl-2 font-sans text-sm text-yellow-500 hover:text-stone-600">
                                            <Link
                                              href={df.jobplatformurl}
                                              rel="noopener noreferrer"
                                              target="_blank"
                                            >
                                              Apply
                                            </Link>
                                          </span>
                                        </span>
                                      </span>
                                    </div>

                                    <div className="text-paragraph jobdesc mb-5 font-sans text-base">
                                      <PortableText
                                        content={df.content}
                                        serializers={{
                                          normal: ({ children }) => (
                                            <p className="pb-2">{children}</p>
                                          ),
                                          strong: ({ children }) => (
                                            <strong className="font-semibold">
                                              {children}
                                            </strong>
                                          ),
                                          li: ({ children }) => (
                                            <li className="special-list-item ml-5 list-disc">
                                              {children}
                                            </li>
                                          ),
                                        }}
                                      />
                                    </div>
                                    <div>
                                      {/* <Button
                                      onClick={handleOpen}
                                      variant="text"
                                      placeholder={null}
                                      size='sm'
                                    >
                                      More
                                    </Button> */}
                                      <Dialog
                                        open={open}
                                        handler={handleOpen}
                                        placeholder={null}
                                      >
                                        <DialogHeader
                                          placeholder={null}
                                          className="pb-5 pl-10 pr-10 pt-10 font-Inter text-stone-600"
                                        >
                                          {df.title}
                                        </DialogHeader>
                                        <DialogBody
                                          placeholder={null}
                                          className="pb-0 pl-10 pr-10 pt-0 font-Inter text-stone-600"
                                        >
                                          {df.content.rendered}
                                          {/* <img src={df.poster} width={800} height={800} alt='' /> */}
                                        </DialogBody>
                                        <DialogFooter placeholder={null}>
                                          <Button
                                            variant="gradient"
                                            color="black"
                                            onClick={handleOpen}
                                            placeholder={null}
                                          >
                                            <span>Close</span>
                                          </Button>
                                        </DialogFooter>
                                      </Dialog>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </Fade>
                        )
                      } else {
                        return (
                          <div
                            key={i}
                            className="container mb-20 overflow-hidden rounded-md border bg-stone-50 p-0"
                          >
                            <Fade duration={1200} delay={300} triggerOnce>
                              <div className="row g-0">
                                <div className="min-h-[400px] sm:col-12 md:col-6">
                                  <div className="pb-5 pl-10 pr-10 pt-10 sm:pb-10 sm:pl-10 sm:pr-10 sm:pt-10">
                                    <h2 className="heading-h2 mb-5 text-4xl font-semibold leading-tight sm:text-5xl">
                                      {df.title}
                                    </h2>
                                    <div className="pb-5 text-stone-600">
                                      <span className="inline-grid grid-cols-3 gap-3">
                                        {/* <span className="inline-flex items-center">
                                        <IoNewspaperOutline />
                                        <span className='pl-2 font-sans text-sm'>Poster</span>
                                      </span> */}
                                        <span className="inline-flex items-start">
                                          <IoCalendarClearOutline />
                                          <span className="pl-2 font-sans text-sm">
                                            {format(
                                              new Date(df.date),
                                              'dd-MM-yyyy'
                                            )}
                                          </span>
                                        </span>
                                        <span className="inline-flex items-start">
                                          <IoBriefcaseOutline />
                                          <span className="pl-2 font-sans text-sm">
                                            {df.jobtype}
                                          </span>
                                        </span>
                                        <span className="inline-flex items-start">
                                          <IoPaperPlaneOutline />
                                          <span className="pl-2 font-sans text-sm text-yellow-500 hover:text-stone-600">
                                            <Link
                                              href={df.jobplatformurl}
                                              rel="noopener noreferrer"
                                              target="_blank"
                                            >
                                              Apply
                                            </Link>
                                          </span>
                                        </span>
                                      </span>
                                    </div>
                                    <div className="text-paragraph mb-5 font-sans text-base">
                                      <PortableText
                                        content={df.content}
                                        serializers={{
                                          normal: ({ children }) => (
                                            <p className="pb-2">{children}</p>
                                          ),
                                          strong: ({ children }) => (
                                            <strong className="font-semibold">
                                              {children}
                                            </strong>
                                          ),
                                          li: ({ children }) => (
                                            <li className="special-list-item ml-5 list-disc">
                                              {children}
                                            </li>
                                          ),
                                        }}
                                      />
                                    </div>
                                  </div>
                                </div>
                                <div
                                  className="col-12 min-h-64 md:col-6"
                                  style={{
                                    backgroundImage:
                                      'url("https://cdn.sanity.io/' +
                                      df.coverImage +
                                      '")',
                                    backgroundSize: 'cover',
                                    backgroundRepeat: 'no-repeat',
                                    backgroundPosition: 'center',
                                    overflow: 'hidden',
                                  }}
                                ></div>
                              </div>
                            </Fade>
                          </div>
                        )
                      }
                    } else {
                      return (
                        <div
                          key={i}
                          className="mb-20 overflow-hidden rounded p-4 text-center"
                        ></div>
                      )
                    }
                  })
                })(dataCareer)}
              </div>

              <CTA key={1} />
            </div>
          </Container>
        </Layout>
      </div>
    </>
  )
}