import React, { useCallback, useState } from 'react'
import {
    createColumnHelper,
    getCoreRowModel,
    useReactTable,
    getSortedRowModel
} from '@tanstack/react-table'
import { useMutation, useQuery, useQueryClient } from 'react-query'
import {  Dropdown, Form, InputGroup, Modal } from 'react-bootstrap'
import { useNavigate } from 'react-router-dom'
import {  useForm } from 'react-hook-form'
import ReactTable from '../../components/ReactTable'
import Pagination from '../../components/Pagination'
import requestApi from '../../utils/request'
import {
    timeDifference
} from '../../functions/common'
import Swal from 'sweetalert2'
import { ReactComponent as Eyes } from '../../assets/images/teyes.svg'
import { ReactComponent as DeleteImg } from '../../assets/images/redbin.svg'
import { ReactComponent as SearchIcon } from '../../assets/images/greysearch.svg'
import InputControl from '../../components/InputControl'
import DropDownControl from '../../components/DropDownControl'
import { viewjobapplication } from '../../Routes/routingConsts'
import Spinner from 'react-bootstrap/Spinner'
import { useEffect } from 'react'
import { deleteActionIcon } from '../../functions/actionIcons'
import FlottedButton from '../../components/FlottingButton'
import {ReactComponent as ViewPDF} from '../../assets/images/viewPDFIcon.svg'


const JobApplicationManagement = () => {
    const [showCV, setShowCV] = useState(false)
    const navigate = useNavigate()
    const queryClient = useQueryClient()
    const [DataLimit, setDataLimit] = useState(10)
    const [currentPage, setCurrentPage] = useState(1)
    // const [TotalPagies, setTotalPagies] = useState(1)
    const [userFilterText, setuserFilterText] = useState('')
    const [applicationStatus, setApplicationStatus] = useState('')
    const handleChange2 = (e) => {
        setCurrentPage(1)
        const getData = setTimeout(() => {
            setuserFilterText(e.target.value)
        }, 1000)
        clearInterval()
    }

    const handleChange = (eventkey) => {
        setDataLimit(eventkey)
    }
    const {
        register,
        handleSubmit,
        reset,
        getValues,
        control,
        formState: { errors }
    } = useForm()

    const [sorting, setSorting] = useState([])
    const [toggle, setToggle] = useState(null)
  
    ///////Edit status modal  /////
    const [showEdit, setShowEdit] = useState(false)
    async function editJobApplication(payload) {
        return await requestApi.post(
            `/job-application/edit-job-application`,
            payload
        )
    }
    const mutation = useMutation(editJobApplication, {
        onSuccess: ({ data }) => {
            queryClient.invalidateQueries('jobApplicationlist')
            setShowEdit(false)
        },
        onError: (error) => {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '',
                text: error?.message
            })
        }
    })

    const handleEditModal = (
        jobApplicationId,
        jobApplicationStatus,
        description
    ) => {
        setShowEdit(true)
        reset({
            jobApplicationId,
            jobApplicationStatus,
            description
        })
    }
    const onSubmitEditmodal = ({ ...data }) => {
        // const payload = { ...data }
        // mutation.mutate(payload)
        setShowEdit(false)
    }
    /////////end edit modal/////
    function UserList({ queryKey }) {
        return requestApi
            .post(
                `/job-apply/list`,
                {
                    limit: queryKey[2],
                    page: queryKey[1],
                    search: queryKey[3],
                    sortKey: queryKey[4]?.id ?? '',
                    sortBy: queryKey[4] ? (queryKey[4]?.desc ? -1 : 1) : '',
                    status:
                        applicationStatus === 'Not Selected'
                            ? 'Rejected'
                            : applicationStatus
                },
                { headers: true }
            )
            .then((res) => {
                return res.data
            })
    }
    const { data, isLoading } = useQuery({
        queryKey: [
            'jobApplicationlist',
            currentPage,
            DataLimit,
            userFilterText,
            sorting[0],
            applicationStatus
        ],
        queryFn: UserList
        // select: () => {
        //     return {
        //         data: null
        //     }
        // }
    })

    let totalJobApplications = data?.meta?.totalCount

    const handleChangePage = useCallback(
        (currentPage) => {
            setCurrentPage(currentPage)
        },
        [currentPage]
    )
    // filter change for status application /////

    const handleChangeApplicationStatus = (eventkey) => {
        setCurrentPage(1)
        setApplicationStatus(eventkey)
    }

    function handleEditApplicationData(id) {
        navigate(`${viewjobapplication}/${id}`)
    }

    // end filter for status application////

    const columnHelper = createColumnHelper()
    const columns = [
        columnHelper.display({
            id: 'actions',
            header: 'Action',
            cell: (row) => {
                return (
                    <>
                        <FlottedButton
                            clickFn={() => {
                                setToggle((pre) =>
                                    pre === row.row.original?.jobApplyId
                                        ? null
                                        : row.row.original?.jobApplyId
                                )
                            }}
                            isTrue={
                                row.row.original?.jobApplyId === toggle
                            }
                        >
                            {/* {row.row.original.status === 3 ? (
                                ''
                            ) : (
                                <li
                                    className="i1 icon"
                                    onClick={() =>
                                        handleEditApplicationData(
                                            row.row.original?.jobApplicationId
                                        )
                                    }
                                >
                                    {viewIcon}
                                </li>
                            )} */}
                            {/* new section add for edit */}
                            {/* <button
                            className="action-btn"
                            onClick={() =>
                                handleEditModal(
                                    row?.row?.original?.jobApplicationId,
                                    row.row.original.jobApplicationStatus,
                                    row?.row?.original?.description
                                )
                            }
                        >
                            <span>
                                <Edit />
                            </span>
                        </button> */}
                            {row.row.original.status === 3 ? (
                                ''
                            ) : (
                                <li
                                    className="i1 icon"
                                    onClick={() =>
                                        hanleDeleteModal(
                                            row.row.original?.jobApplyId
                                        )
                                    }
                                >
                                    {deleteActionIcon}
                                </li>
                            )}
                        </FlottedButton>
                    </>
                )
            }
        }),
        columnHelper.accessor((row) => row.jobTitle, {
            id: 'name',
            header: 'Name',
            cell: (row) => {
                return <p>{row.row.original?.name}</p>
            }
        }),
        columnHelper.accessor((row) => row.jobTitle, {
            id: 'jobTitle',
            header: 'Job Title',
            cell: (row) => {
                return <p>{row.row.original?.jobTitle}</p>
            }
        }),

        columnHelper.accessor((row) => row.email, {
            id: 'email',
            header: 'Email',
            cell: (row) => {
                return <p>{row.row.original?.email}</p>
            }
        }),
        columnHelper.accessor((row) => row.phone, {
            id: 'phone',
            header: 'Phone',
            cell: (row) => {
                return <p>{row.row.original?.phone}</p>
            }
        }),
        columnHelper.accessor((row) => row.appliedOn, {
            id: 'appliedOn',
            header: 'Applied On',
            cell: (row) => {
                return (
                    <p>
                        {/* {row.row.original?.appliedOn &&
                            formatDateToMonthShortwithFormate(
                                row.row.original?.appliedOn
                            )} */}

                        {row.row.original?.appliedOn &&
                            timeDifference(row.row.original?.appliedOn)}
                    </p>
                )
            }
        }),

        // columnHelper.accessor((row) => row.status, {
        //     id: 'status',
        //     header: 'Status',
        //     cell: (row) => {
        //         let flag = row.row?.original?.status
        //         return (
        //             <p
        //                 className={`labels ${
        //                     flag === 0 || flag === 1
        //                         ? 'active'
        //                         : flag === 3
        //                         ? 'deleted'
        //                         : ''
        //                 }`}
        //             >
        //                 {flag === 0 || flag === 1
        //                     ? 'Active'
        //                     : flag === 3
        //                     ? 'Deleted'
        //                     : ''}
        //                 {/* {row.row.original.jobStatus} */}
        //             </p>
        //         )
        //     }
        // }),

        columnHelper.accessor((row) => row.cv, {
            id: 'cv',
            header: 'View CV',
            cell: (row) => {
                return(
                    // <iframe src={row.row.original?.cv} alt="" />
              <Eyes className='job_cv_eyes' onClick={()=>handleViewCV(row.row.original?.cv)} />
                )
            }
        }),

      
        //#endregion
    ]

    const tableInstance = useReactTable({
        data: data?.data,
        columns: columns,
        state: {
            sorting
        },
        onSortingChange: setSorting,
        getSortedRowModel: getSortedRowModel(),
        getCoreRowModel: getCoreRowModel()
    })

    // Delete User

    const [showDelete, setShowDelete] = useState(false)
    const [deletedId, setDeletedId] = useState(null)

    async function deleteApplicationId(jobApplyId) {
        return await requestApi.post(`/job-apply/delete`, {
            jobApplyId
        })
    }
    const mutationDelete = useMutation(deleteApplicationId, {
        onSuccess: ({ data }) => {
            queryClient.invalidateQueries('jobApplicationlist')
            setShowDelete(false)
        },
        onError: (error) => {
            Swal.fire({
                position: 'center',
                icon: 'error',
                title: '',
                text: error?.message
            })
        }
    })

    const hanleDeleteModal = (jobApplyId) => {
        setShowDelete(true)
        setDeletedId(jobApplyId)
    }
    const handleDeleteUser = (jobApplyId) => {
        mutationDelete.mutate(jobApplyId)
        setShowDelete(false)
    }

    // useEffect while record deleted on last page ////
    useEffect(() => {
        if (currentPage && data?.data?.length == 0) {
            setCurrentPage(1)
        } else {
        }
    }, [currentPage, data?.data])

    // End useEffect ////



const[userCVLink,setUserCVLink] = useState("")
    const handleViewCV=(cvLink)=>{
                setShowCV(true)   
                 setUserCVLink(cvLink)   
    }

    return (
        <>
            <div className="sidebar-content common-page">
                <div className="contentwhole-box">
                    <div className="filter-titlebox">
                        <div className="title-text">
                            <h3>Manage Job Applicaiton</h3>
                        </div>
                        <div className="filterbox">
                            <div className="searcskills myaccount-page">
                                <div>
                                    <div className="searchstatus-box">
                                        <InputGroup className="mb-3 input-wrapper">
                                            <InputGroup.Text id="basic-addon1">
                                                <SearchIcon />
                                            </InputGroup.Text>
                                            <Form.Control
                                                placeholder="Search"
                                                type="search"
                                                aria-label="Username"
                                                aria-describedby="basic-addon1"
                                                className="icontrol"
                                                {...register(
                                                    'jobApplicationSearch',
                                                    {
                                                        onChange: (e) => {
                                                            handleChange2(e)
                                                        }
                                                    }
                                                )}
                                            />
                                        </InputGroup>
                                        {/* <div className="status-dropdown">
                                            <Dropdown
                                                onSelect={
                                                    handleChangeApplicationStatus
                                                }
                                            >
                                                <Dropdown.Toggle
                                                    variant="success"
                                                    id="dropdown-basic"
                                                >
                                                    {!!applicationStatus
                                                        ? applicationStatus
                                                        : 'Application Status'}
                                                </Dropdown.Toggle>

                                                <Dropdown.Menu>
                                                    <Dropdown.Item eventKey="">
                                                        Application Status
                                                    </Dropdown.Item>
                                                    <Dropdown.Item eventKey="Pending">
                                                        Pending
                                                    </Dropdown.Item>
                                                    <Dropdown.Item eventKey="To interview">
                                                        To interview
                                                    </Dropdown.Item>
                                                    <Dropdown.Item eventKey="Hold">
                                                        Hold
                                                    </Dropdown.Item>
                                                    <Dropdown.Item eventKey="Selected">
                                                        Selected
                                                    </Dropdown.Item>
                                                    <Dropdown.Item eventKey="Not Selected">
                                                        Not Selected
                                                    </Dropdown.Item>
                                                </Dropdown.Menu>
                                            </Dropdown>
                                        </div> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {isLoading ? (
                        <div className="spinner-wrapper">
                            <Spinner
                                animation="border"
                                role="status"
                                className="tdata"
                            >
                                <span className="visually-hidden">
                                    Loading...
                                </span>
                            </Spinner>
                        </div>
                    ) : (
                        <>
                            {data?.data?.length > 0 ? (
                                <>
                                    <ReactTable tableInstance={tableInstance} />
                                    <div className="paginationbox">
                                        <div className="showingpages">
                                            <span>
                                                Showing{' '}
                                                {(currentPage - 1) * DataLimit +
                                                    1}{' '}
                                                to{' '}
                                                {Math.min(
                                                    currentPage * DataLimit,
                                                    totalJobApplications
                                                )}{' '}
                                                of {totalJobApplications}{' '}
                                                Applications
                                            </span>
                                        </div>
                                        {totalJobApplications > 10 && (
                                            <div className="itemsperpage">
                                                <span>Items per page:</span>
                                                <Dropdown
                                                    flip="no"
                                                    onSelect={handleChange}
                                                >
                                                    <Dropdown.Toggle
                                                        variant="success"
                                                        id="dropdown-basic"
                                                    >
                                                        {DataLimit}
                                                    </Dropdown.Toggle>

                                                    <Dropdown.Menu>
                                                        <Dropdown.Item eventKey="10">
                                                            10
                                                        </Dropdown.Item>
                                                        <Dropdown.Item eventKey="20">
                                                            20
                                                        </Dropdown.Item>
                                                        <Dropdown.Item eventKey="30">
                                                            30
                                                        </Dropdown.Item>
                                                    </Dropdown.Menu>
                                                </Dropdown>
                                            </div>
                                        )}
                                        {totalJobApplications > 10 && (
                                            <div className="pagination">
                                                <Pagination
                                                    total={Math.ceil(
                                                        totalJobApplications /
                                                            DataLimit
                                                    )}
                                                    current={currentPage}
                                                    onChangePage={
                                                        handleChangePage
                                                    }
                                                />
                                            </div>
                                        )}
                                    </div>
                                </>
                            ) : (
                                <div className="noresult">
                                    <p>No Result Found</p>
                                </div>
                            )}
                        </>
                    )}
                </div>
            </div>
            <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 <br />
                                    Job Application?
                                </h4>
                            </div>
                            <div className="delete-action">
                                <button
                                    className="common-btn yes"
                                    type="button"
                                    onClick={() => handleDeleteUser(deletedId)}
                                >
                                    Yes
                                </button>
                                <button
                                    className="common-btn no"
                                    type="button"
                                    onClick={() => setShowDelete(false)}
                                >
                                    No
                                </button>
                            </div>
                        </div>
                    </Form>
                </Modal.Body>
            </Modal>

            {/* Edit Modal */}
            <Modal
                show={showEdit}
                onHide={() => setShowEdit(false)}
                errors={errors}
                control={control}
                className="modalbox"
            >
                <Modal.Header closeButton>
                    <div className="modal-title">
                        <h3>Edit</h3>
                    </div>
                </Modal.Header>
                <Modal.Body>
                    <Form
                        className="formbox"
                        onSubmit={handleSubmit(onSubmitEditmodal)}
                    >
                        <div className="delete-box">
                            <div className="row">
                                <div className="col-12">
                                    <div className="mb-3 input-wrapper">
                                        <Form.Label className="lcontrol">
                                            Application Status
                                        </Form.Label>
                                        <DropDownControl
                                            name="jobApplicationStatus"
                                            // label="Status"
                                            control={control}
                                            options={[
                                                'Pending',
                                                'To interview',
                                                'Hold',
                                                'Selected',
                                                'Not Selected'
                                            ]}
                                            register={register}
                                            error={
                                                errors.jobApplicationStatus
                                                    ?.message
                                            }
                                        />
                                    </div>
                                </div>
                                <div className="col-12">
                                    <InputControl
                                        label="Note"
                                        name="description"
                                        as="textarea"
                                        textarea={true}
                                        register={register}
                                        error={errors.description?.message}
                                    />
                                </div>
                                <div className="col-12">
                                    <div class="save edit text-start">
                                        {/* <ButtonWithLoader
                                            isLoading={mutation?.isLoading}
                                            cssClass="common-btn login-btn comman-auth-btn"
                                        > */}
                                        <button
                                            type="submit"
                                            class="common-btn btn btn-primary"
                                        >
                                            Edit
                                        </button>
                                        {/* </ButtonWithLoader> */}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Form>
                </Modal.Body>
            </Modal>

            {/* CV-Show  Modal*/}
            <Modal show={showCV} onHide={() => setShowCV(false)} size='lg'>
                <Modal.Header closeButton></Modal.Header>
                <Modal.Body>
                    {userCVLink ? (
                        <>
                       {/* <div style={{overflow:"hidden"}}>
                           <embed src={userCVLink} style={{height:"750px",width:"750px"}} />
                       </div> */}






<div style={{
    height:'650px',
    position:'relative',
    zIndex:999,
    border: '1px solid #000',
  }}>
  <embed className="pdfobject" src={userCVLink} type="application/pdf" style={{
      overflow: 'auto',
      width: '100%',
      height: '100%',
    }} internalinstanceid="30"></embed>
  {/*
    <iframe title="preview" src={pdf} style={{
        width: '100%',
        height: '700px',
      }} frameBorder="0"></iframe>
  */}
</div>
                        </>



                //     <div>
                //     <style>{`
                //       .react-pdf__Page__canvas {
                //         margin-top: 0 !important;
                //       }
                //     `}</style>
                //     <Document file={userCVLink}>
                //       <Page pageNumber={1} />
                //     </Document>
                //   </div>


                       
                    ) : (
                        'No CV Available'
                    )}
                </Modal.Body>
            </Modal>
        </>
    )
}

export default JobApplicationManagement