'use client'
import React from 'react'
import { FlexBox, WhiteCard } from '../common/HOC'
import { styled } from 'styled-components'
import P from '@/app/components/common/P'
import { Colors } from '@/app/components/common/variable'
import H5 from '@/app/components/common/H5'
import IconBriFecaseTick from 'public/assets/icons/icon-brifecase-tick.svg'
import IconMap from 'public/assets/icons/icon-map.svg'
import CustomLink from '@/app/components/common/CustomLink'
import { useState } from 'react'
import Link from 'next/link'
import { device } from '../common/Devices'
import Skeleton from 'react-loading-skeleton'

const WhiteCardRow = styled.div`
    height: 100%;
    .right-float {
        float: right;
    }
    .skel-list {
        span {
            width: auto;
        }
    }
    .circle-div {
        border-radius: 45px;
    }
    .live-jobs-card {
        padding: 30px;
        height: 100%;
        .card-head {
            flex-wrap: wrap;
            grid-column-gap: 20px;
            grid-row-gap: 30px;
            border-bottom: 1px solid #c5c5c5;
            padding-bottom: 30px;
            p {
                background: ${Colors.lightPink};
                margin: 0;
                border-radius: 45px;
                padding: 11px 23px;
                line-height: 1;
                text-transform: capitalize;
            }
            h5 {
                margin: 0;
                font-weight: 600;
                width: 100%;
                line-height: 1;
            }
        }
        .card-body {
            padding-top: 30px;
            padding-bottom: 46px;
            .desc {
                font-size: 18px;
                margin-bottom: 30px;
                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;
                min-height: 102px;
                div,
                p {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    line-height: 1.5;
                }
                p {
                    font-size: 18px;
                    margin: 0;
                }
            }
            .read-more-link {
                font-size: 18px;
                color: ${Colors.gray_33};
                font-weight: 600;
                line-height: 1.5;
                &:hover {
                    color: ${Colors.primary};
                }
            }
        }
        .card-footer {
            justify-content: space-between;
            flex-wrap: wrap;
            grid-gap: 10px;
            h5 {
                font-weight: 600;
                line-height: 1;
                margin: 0;
            }
            a {
                padding: 5px 22px 7px;
                font-weight: 600;
            }
        }
        .card-list {
            li {
                display: flex;
                align-items: flex-start;
                grid-gap: 16px;
                margin-bottom: 20px;
                font-size: 18px;
                color: ${Colors.body};
                font-weight: 500;
                &:last-child {
                    margin: 0;
                }
            }
        }
    }
    @media ${device.laptop} {
        .live-jobs-card {
            padding: 20px;
            .card-head {
                grid-column-gap: 10px;
                grid-row-gap: 16px;
                padding-bottom: 16px;
                p {
                    padding: 11px 20px;
                }
            }
            .card-body {
                padding: 16px 0;
                .desc {
                    margin-bottom: 16px;
                }
            }
            .card-list {
                li {
                    font-size: 16px;
                    grid-gap: 10px;
                    margin-bottom: 16px;
                }
            }
        }
    }
    @media ${device.mobileS} {
        .live-jobs-card {
            .card-list {
                li {
                    font-size: 14px;
                    grid-gap: 6px;
                    margin-bottom: 12px;
                    svg {
                        height: 20px;
                        margin-top: 4px;
                    }
                }
            }
        }
    }
`

const LiveJobsCard = ({
    jobTitle,
    location,
    experience,
    jobOpeningId,
    loading,
    jobType,
    salary,
    description
}) => {
    const LiveJobsCardData = {
        JobTimeList: []
    }

    const datalist = {
        list: [
            { key: 'Fulltime' },
            { key: 'Parttime' }
            // {"key" : "Hourly"}
        ]
    }

    // const shiftData = {
    //     list : [
    //         {"key" : "Day shift"},
    //         {"key" : "Night shift"},
    //     ]
    // }
    // console.log('test', loading)
    // var bytes  = CryptoJS.AES.decrypt(ciphertext, 'secret key 123');
    // var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
    return (
        <>
            {loading ? (
                <>
                    <WhiteCardRow>
                        <WhiteCard className="live-jobs-card card-shadow bg-white skeleton">
                            <FlexBox className="card-head justify-start border-0 m-0 p-0">
                                <FlexBox className="justify-start">
                                    <Skeleton
                                        width={100}
                                        height={40}
                                        count={1}
                                        className="circle-div"
                                    />
                                    {/* <Skeleton  width={100} height={40} count={1} className='circle-div mx-4'/> */}
                                </FlexBox>
                                <Skeleton width={200} height={15} count={1} />
                            </FlexBox>
                            <div className="card-body pb-3">
                                <Skeleton width="100%" height={15} count={3} />
                                <FlexBox className="justify-start skel-list mt-4">
                                    <Skeleton
                                        circle
                                        width={20}
                                        height={20}
                                        count={1}
                                    />
                                    <Skeleton
                                        width={150}
                                        height={15}
                                        count={1}
                                        className="mx-4"
                                    />
                                </FlexBox>
                                <FlexBox className="justify-start skel-list">
                                    <Skeleton
                                        circle
                                        width={20}
                                        height={20}
                                        count={1}
                                    />
                                    <Skeleton
                                        width={150}
                                        height={15}
                                        count={1}
                                        className="mx-4"
                                    />
                                </FlexBox>
                            </div>
                            <FlexBox className="card-footer justify-content-between">
                                <FlexBox className="w-100">
                                    <Skeleton
                                        width={150}
                                        height={15}
                                        count={1}
                                    />
                                    <Skeleton
                                        width={100}
                                        height={40}
                                        count={1}
                                        className="right-float circle-div"
                                    />
                                </FlexBox>
                            </FlexBox>
                        </WhiteCard>
                    </WhiteCardRow>
                </>
            ) : (
                <WhiteCardRow>
                    <WhiteCard className="live-jobs-card card-shadow">
                        <FlexBox className="card-head justify-start">
                            {/* <P className="small-18" text={'Fulltime'}/> */}
                            {/* <P className="small-18" text={datalist.list.map((dd)=><>{dd?.key}</>)}/> */}
                            {/* {datalist.list.map((dd) => (
                                <>
                                    <P text={dd?.key} className="small-18" />
                                </>
                            ))} */}

                            <P
                                text={Boolean(jobType) ? jobType : 'Full Time'}
                                className="small-18"
                            />
                            {/* {shiftData.list.map((dd)=><><P text={dd?.key} className="small-18"/></>)} */}
                            {/* <P className="small-18" text={'Day shift'}/> */}
                            <H5 text={jobTitle} />
                        </FlexBox>
                        <div className="card-body">
                            <div className="desc">
                                <p>
                                    {description?.replace(/(<([^>]+)>)/gi, '')}
                                </p>
                                <Link
                                    href={`/find-jobs/${jobOpeningId}`}
                                    className="read-more-link"
                                >
                                    ...Read More
                                </Link>
                            </div>
                            {/* <P
                                className="small-18 desc"
                                text={
                                    <>
                                        We are currently seeking a highly skilled
                                        Speech and Language Therapist to join our
                                        team on a locum basis. As a...
                                        <Link href={`/find-jobs/${jobOpeningId}`}>
                                            Read More
                                        </Link>
                                    </>
                                }
                            /> */}
                            <ul className="card-list">
                                <li>
                                    <IconBriFecaseTick />
                                    {!!experience ? experience : '1-4 Years'}
                                </li>
                                <li>
                                    <IconMap /> {location}
                                </li>
                            </ul>
                        </div>
                        <FlexBox className="card-footer">
                            <H5 text={`£${salary}`} />
                            <CustomLink
                                to={`/find-jobs/${jobOpeningId}`}
                                text={'Apply Now'}
                            />
                        </FlexBox>
                    </WhiteCard>
                </WhiteCardRow>
            )}
        </>
    )
}

export default LiveJobsCard