import React from 'react'
import Layout from '../../components/Layout/Layout'
import { ReactComponent as Location } from '../../assets/images/llocation.svg'
import { ReactComponent as Products } from '../../assets/images/lproducts.svg'
import { ReactComponent as Fulltime } from '../../assets/images/lfulltime.svg'
import { ReactComponent as Experience } from '../../assets/images/lexperience.svg'
import { ReactComponent as Views } from '../../assets/images/lviews.svg'
import { ReactComponent as Applied } from '../../assets/images/lapplied.svg'
import { ReactComponent as Amazon } from '../../assets/images/amazon.svg'
import { ReactComponent as EditIcon } from '../../assets/images/edit.svg'
import { ReactComponent as DeleteIcon } from '../../assets/images/delete.svg'
import { ReactComponent as Twitter } from '../../assets/images/ftwitter.svg'
import { ReactComponent as Linkdin } from '../../assets/images/flinkdin.svg'
import { ReactComponent as Fb } from '../../assets/images/ffacebook.svg'
import { ReactComponent as DeleteImg } from '../../assets/images/redbin.svg'
import { ReactComponent as Instagram } from '../../assets/images/finstagram.svg'
import { Dropdown, Form, Modal, Spinner, Tab, Tabs } from 'react-bootstrap'
import AppellantComponent from './AppellantComponent/AppellantComponent'
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
import requestApi from '../../utils/request'
import { useMutation, useQuery } from 'react-query'
import { currency, formatDateToMonthShortwithFormate, timeDifference } from '../../functions/common'
import draftToHtml from 'draftjs-to-html'
import htmlToDraft from 'html-to-draftjs'
import htmlToText from 'draftjs-to-html'
import { convertToRaw, ContentState, EditorState } from 'draft-js'
import { useState } from 'react'
import {
    home,
    jobopeningmanagement,
    jobreport,
    managejobopening
} from '../../Routes/routingConsts'
import Swal from 'sweetalert2'
// import JobReportManagment from '../JobReportManagment/JobReportManagment'
import ViewToolTip from '../../components/ViewToolTip'
const JobOpeningView = () => {
    const { jobOpeningId } = useParams()
    const {state} = useLocation()
    const [editorState, setEditorState] = useState()
    const [appellantDataShow, setAppellantDataShow] = useState(null)
    async function viewManageJobOpeningInner() {
        return await requestApi
            .post(`job-opening/view`, { jobOpeningId }, { headers: true })
            .then((res) => {
                return res.data
            })
    }
    const { data, isLoading } = useQuery({
        queryKey: ['job-opening-inner-view'],
        queryFn: viewManageJobOpeningInner
    })

    /////Delete Modal pop-up////
    const navigate = useNavigate()
    const [deletedId, setDeletedId] = useState(null)
    const [showDelete, setShowDelete] = useState(false)

    async function deleteJobOpeningDataonId(jobOpeningId) {
        return await requestApi.post(`/job-opening/delete`, {
            jobOpeningId
        })
    }
    const mutationDelete = useMutation(deleteJobOpeningDataonId, {
        onSuccess: ({ data }) => {
            // navigate(managejobopening)
            // setShowEdit(false)
        },
        onError: (error) => {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '',
                text: error?.message
            })
        }
    })
    const hanleDeleteModal = (jobOpeningId) => {
        setShowDelete(true)
        setDeletedId(jobOpeningId)
    }
    const handleDeleteJobApplication = (jobOpeningId) => {
        mutationDelete.mutate(jobOpeningId)
        setShowDelete(false)
    }

    
    return (
        // <Layout>
        <div className="sidebar-content">

            {isLoading ?  (
                        <div className="spinner-wrapper">
                            <Spinner
                                animation="border"
                                role="status"
                                className="tdata"
                            >
                                <span className="visually-hidden">
                                    Loading...
                                </span>
                            </Spinner>
                        </div>
                    ) : <>
            <ul className="nav-links">
                <Link to={home}>
                    <li>
                        <a>Dashboard</a>
                        <span>&gt;</span>
                    </li>
                </Link>
                {state==='jobreport' ? <Link to={jobreport}>
                <li>
                        <a>Job Report Management</a>
                        <span>&gt;</span>
                    </li>
                </Link> : <Link to={jobopeningmanagement}>
                    <li>
                        <a>Manage Job Opening</a>
                        <span>&gt;</span>
                    </li>
                </Link>}
                {/* <Link to={jobopeningmanagement}>
                    <li>
                        <a>Manage Job Opening</a>
                        <span>&gt;</span>
                    </li>
                </Link> */}
{/* 
                <Link
                    to={() => {
                        return false
                    }}
                > */}
                    <li>
                        <a className="bold">
                            View Job Opening
                        </a>
                    </li>
                {/* </Link> */}
            </ul>
            <div className="viewfullpage-area jobsforyou-area newjobsinner-page ">
                <div className="row">
                    <div className="col-lg-12 col-md-12 col-12">
                        <div className="jobview-box">
                            <div className="joblisting-box">
                                <div className="job-box">
                                    <div className="logo-titlebox">
                                        <div className="clogo whitebox">
                                            {/* <Amazon /> */}
                                            <img
                                                src={data?.data?.companyProfile}
                                                alt=""
                                                style={{
                                                    // width: '116px',
                                                    // height: '116px',
                                                    objectFit: 'contain',
                                                    overflow: 'hidden'
                                                }}
                                            />
                                        </div>
                                        <div className="titlelabels-mainbox">
                                            <div className="ctitle">
                                                <h5>
                                                    {/* Software Developer */}
                                                    {data?.data?.jobTitle}
                                                </h5>
                                                <span>
                                                    {/* Amazon */}
                                                    {data?.data?.companyName}
                                                </span>
                                            </div>
                                            <ul className="labels-box">
                                                <li>
                                                    <span className="labels">
                                                        <Location />
                                                        {data?.data?.location}
                                                    </span>
                                                </li>
                                                <li>
                                                    <span className="labels">
                                                        <Fulltime />
                                                        {data?.data?.jobType}
                                                    </span>
                                                </li>
                                                {/* <li>
                                                        <span className="labels">
                                                            <Products />
                                                            Software Products
                                                            {
                                                                data?.data
                                                                    ?.industry
                                                            }
                                                        </span>
                                                    </li> */}
                                                <li>
                                                    <span className="labels">
                                                        <Experience />
                                                        {/* 3-4 Years */}
                                                        {data?.data
                                                            ?.experience > 1
                                                            ? `${data?.data?.experience} Years`
                                                            : `${data?.data?.experience} Year`}
                                                    </span>
                                                </li>
                                                <li>
                                                <ViewToolTip
                                                            overlay="Total Views"
                                                            text={
                                                                data?.data
                                                                ?.totalViewer
                                                            }
                                                            Cmp={<Views />}
                                                        />
                                                </li>
                                                <li>
                                                <ViewToolTip
                                                            overlay="Total Applications"
                                                            text={
                                                                data?.data
                                                                    ?.totalApplication
                                                            }
                                                            Cmp={<Applied />}
                                                        />
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div className="apply-box">
                                        <div className="daysview-box">
                                            <span className="days">Status</span>
                                            <span>
                                                <button
                                                    className={`labels ${
                                                        data?.data
                                                            ?.jobStatus ===
                                                        'Active'
                                                            ? 'active'
                                                            : data?.data
                                                                  ?.jobStatus ===
                                                              'Inactive'
                                                            ? 'inactive'
                                                            : data?.data
                                                                  ?.jobStatus ===
                                                              'Archived'
                                                            ? 'archived'
                                                            : ''
                                                    }`}
                                                >
                                                    {data?.data?.jobStatus}
                                                </button>
                                            </span>
                                        </div>
                                        <div className="posted-stamp">
                                            <h6>
                                                {' '}
                                                <span>Posted On:</span>{' '}
                                                {/* 12/12/2022 */}
                                                {timeDifference(
                                                    data?.data?.createdDate
                                                )}
                                            </h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="jobview-box jobdesoverview-box">
                        <div className="row">
                            <div className="col-xl-8 col-lg-12 col-md-12 col-12">
                                <div className="tabmain-box scrollbar">
                                    {/* tabs */}
                                    <Tabs
                                        defaultActiveKey="Job Description"
                                        id="uncontrolled-tab-example"
                                        className="mb-3 job-tabs"
                                    >
                                        <Tab
                                            eventKey="Job Description"
                                            title="Job Description"
                                        >
                                            <div className="jobdesbox">
                                                <p
                                                    dangerouslySetInnerHTML={{
                                                        __html: data?.data
                                                            ?.jobDescription
                                                    }}
                                                >
                                                    {/* {
                                                            data?.data
                                                                ?.jobDescription
                                                        } */}
                                                    {/* We are looking to hire
                                                        an experienced angularJS
                                                        developer to join our
                                                        dynamic team. As a lead
                                                        developer, you will be
                                                        responsible for creating
                                                        a top-level coding-base
                                                        using Angular best
                                                        practices. Your role
                                                        will require you to
                                                        implement an exciting
                                                        and streamlined user
                                                        experience in the form
                                                        of a Java-based desktop
                                                        and mobile web-app.{' '} */}
                                                </p>
                                                <br />

                                                <p>
                                                    {' '}
                                                    {/* To ensure success as an
                                                        angularJS developer, you
                                                        should have extensive
                                                        knowledge of theoretical
                                                        software engineering, be
                                                        proficient in
                                                        JavaScript, HTML, and
                                                        CSS, and have excellent
                                                        project management
                                                        skills. Ultimately, a
                                                        top-class angularJS
                                                        developer can design and
                                                        build a streamlined
                                                        application to company
                                                        specifications that
                                                        perfectly meet the needs
                                                        of the user. */}
                                                </p>
                                                <br />

                                                <p>
                                                    <b>
                                                        {' '}
                                                        {/* AngularJS Developer
                                                            Responsibilities :-{' '} */}
                                                    </b>
                                                    <br />
                                                    <ul>
                                                        <li>
                                                            {/* -Designing and
                                                                developing user
                                                                interfaces using
                                                                angularJS best
                                                                practices. */}
                                                        </li>
                                                        <li>
                                                            {' '}
                                                            {/* -Adapting
                                                                interface for
                                                                modern internet
                                                                applications
                                                                using the latest
                                                                front-end
                                                                technologies. */}
                                                        </li>
                                                        <li>
                                                            {' '}
                                                            {/* -Writing
                                                                JavaScript, CSS,
                                                                and HTML. -
                                                                Developing
                                                                product analysis
                                                                tasks. */}
                                                        </li>
                                                        <li>
                                                            {' '}
                                                            {/* -Making complex
                                                                technical and
                                                                design decisions
                                                                for AngularJS
                                                                projects. */}
                                                        </li>
                                                        <li>
                                                            {/* -Developing
                                                                application
                                                                codes and unit
                                                                tests in
                                                                AngularJS, Java
                                                                Technologies,
                                                                and Rest Web
                                                                Services. */}
                                                        </li>
                                                        <li>
                                                            {' '}
                                                            {/* -Conducting
                                                                performance
                                                                tests. */}
                                                        </li>
                                                        <li>
                                                            {/* -Previous work
                                                                experience as an
                                                                angularJS
                                                                developer. */}
                                                        </li>
                                                    </ul>
                                                </p>
                                            </div>
                                        </Tab>
                                        <Tab
                                            eventKey="Job Overview"
                                            title="Applicants"
                                        >
                                            <div className="appellant-box">
                                                <AppellantComponent
                                                    jobAppellantDataList={
                                                        data?.data
                                                            .jobAppellantData
                                                    }
                                                />
                                            </div>
                                        </Tab>
                                    </Tabs>
                                </div>
                            </div>
                            <div className="col-xl-4 col-lg-12 col-md-12 col-12">
                                <div class="overview-content whitebox job-overview">
                                    <h4>Job Overview</h4>
                                    <div class="cabox">
                                        <p>Category:</p>
                                        <b>
                                            {/* Software Developer */}
                                            {data?.data?.industryName ? data?.data?.industryName : '-'} 
                                        </b>
                                    </div>
                                    <div class="cabox">
                                        <p>Salary:</p>
                                        <b>
                                            {data?.data?.isSalarySpecified ? (
                                                <>
                                                    <span
                                                        dangerouslySetInnerHTML={{
                                                            __html: currency[
                                                                data?.data
                                                                    ?.currency
                                                            ]
                                                        }}
                                                    />{' '}
                                                    &nbsp;
                                                    {data?.data?.minSalary}-
                                                    {data?.data?.maxSalary}
                                                    &nbsp;
                                                    {data?.data?.salaryType}
                                                </>
                                            ) : (
                                                'Not Specified'
                                            )}
                                        </b>
                                        {/* <b>
                                            $ 30K - 60K P.A.
                                            {data?.data?.salary}
                                        </b> */}
                                    </div>
                                    <div class="cabox">
                                        <p>No of Openings:</p>
                                        <b>{data?.data?.totalOpening}</b>
                                    </div>
                                    {/* <div class="cabox">
                                            <p>Address:</p>
                                            <b>
                                                {data?.data?.address=== "" ? " - " : data?.data?.address}
                                                {
                                                    data?.data?.employerData
                                                        ?.companyAddress
                                                }
                                                9 Bailey Drive, Fredericton, NB
                                                E3B 5A3
                                            </b>
                                        </div> */}
                                    <div class="cabox">
                                        <p>Skills:</p>
                                        <ul class="skillbox">
                                            {data.data.keySkill
                                                .split(',')
                                                .map((keyskillData) => (
                                                    <>
                                                        <li>
                                                            <span class="labels">
                                                                {keyskillData}
                                                            </span>
                                                        </li>
                                                    </>
                                                ))}
                                        </ul>
                                    </div>
                                </div>
                                {/* <div className="connect-social whitebox">
                                        <h4>Share on:</h4>
                                        <ul className="social-icons whitebox">
                                            <li>
                                                <a
                                                    href="https://www.facebook.com"
                                                    className="icon fb"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    <Fb />
                                                </a>
                                            </li>
                                            <li>
                                                <a
                                                    href="https://twitter.com"
                                                    className="icon twitter"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    <Twitter />
                                                </a>
                                            </li>
                                            <li>
                                                <a
                                                    href="https://in.linkedin.com"
                                                    className="icon linkdin"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    <Linkdin />
                                                </a>
                                            </li>
                                            <li>
                                                <a
                                                    href="https://www.instagram.com"
                                                    className="icon instagram"
                                                    target="_blank"
                                                    rel="noopener noreferrer"
                                                >
                                                    <Instagram />
                                                </a>
                                            </li>
                                        </ul>
                                    </div> */}
                            </div>
                        </div>
                    </div>
                </div>

                {/* Delete Modal on Id */}
                <Modal
                    className="modalbox deletemodal"
                    show={showDelete}
                    onHide={() => setShowDelete(false)}
                    backdrop="static"
                    keyboard={false}
                >
                    <Modal.Header closeButton></Modal.Header>
                    <Modal.Body>
                        <Form className="formbox">
                            <div className="delete-box">
                                <div className="deleteimg">
                                    <DeleteImg />
                                </div>
                                <div className="content">
                                    <h4>
                                        Are you sure you want to delete this job{' '}
                                        <br />
                                        opening?
                                    </h4>
                                </div>
                                <div className="delete-action">
                                    <button
                                        className="common-btn yes"
                                        type="button"
                                        onClick={() =>
                                            handleDeleteJobApplication(
                                                deletedId
                                            )
                                        }
                                    >
                                        Yes
                                    </button>
                                    <button className="common-btn no">
                                        No
                                    </button>
                                </div>
                            </div>
                        </Form>
                    </Modal.Body>
                </Modal>
            </div> </>}
        </div>
        // </Layout>
    )
}

export default JobOpeningView