import React, { Component } from 'react';
import blogOne from '../../assets/images/blog-1.jpg';
import blogTwo from '../../assets/images/blog-2.jpg';
import blogThree from '../../assets/images/blog-3.jpg';
import JobsData from '../../Services/JobsData';
import getConfig from './../../Config/config'
import CountDownTimer from '../Helper/CountDownTimer';

class CurrentJobsHero extends Component {

    constructor() {
        //  debugger;
        super();
        this.state = { jobsDataResults: [] };
    }

    async componentDidMount(){
        //  debugger;
        JobsData().then(res => {
            this.setState({jobsDataResults:res.data.result_list});
        }).catch(err => {
            console.log('startjoblist error', err)
        })
    }

    titleLen(title){
        let maxl = 45;
        title.replace('/', ' ');
        title.replace('www.', '');
        title.replace('.com', '');
        title.replace('http//', '');

        return (title.length > maxl)? title.substring(0,maxl-2)+'...': title;
    }
    //  if (jobsDataResults ()== null){
    //       return null;
    //   }
    render() {
        var site = getConfig()[0];
        if ( this.state.jobsDataResults== undefined ){
            return null;
        }
        var dashUrl = process.env.REACT_APP_DASH_URL;

        if (this.state.jobsDataResults.length == 0){
            return <></>;
        }
        return (
            <>
                <section className="appie-blog-area">
                    <div className="container">
                        <div className="row">
                            <p className='pl-15'>Recent jobs.</p>

                            {
                                this.state.jobsDataResults.map((i, index) => {
                                    var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                                    var postDt  = new Date(i.expire).toLocaleDateString("en-US", options);
                                    let hourRemaining = Math.floor(Math.abs(new Date() - new Date(i.expire)) / (1000*60*60))

                                    if(index < 5){
                                    return (
                                    <div className="col-12">
                                        <div
                                            className="container-fluid mb-10 wow animated fadeInUp boxBorder d-flex align-items-center rounded"
                                            data-wow-duration="3000ms"
                                            data-wow-delay="200ms"
                                        >
                                            <div className="content d-flex flex-column justify-content-between" style={{height: '50px', width: '100%'}}>
                                                <div className="titleBox">
                                                    <h3 className="title_hero">
                                                        <a href={dashUrl}>
                                                            <span className='font_black_hero'>{this.titleLen(i.title)} </span>
                                                        </a>
                                                    </h3>
                                                </div>
                                                <div className='p-0 container-fluid'>
                                                    {/*<div><hr /></div>*/}
                                                    {/*<div className="blog-meta">*/}
                                                    {/*    <ul>*/}
                                                    {/*        <li className="expire">*/}
                                                    {/*            <a href={dashUrl} className='d-block'>*/}
                                                    {/*                <div className='font_red d-flex align-items-start'>*/}
                                                    {/*                    <div className='pr-2'>Expires :</div>*/}
                                                    {/*                    <CountDownTimer targetDate={postDt}/>*/}
                                                    {/*                </div>*/}
                                                    {/*            </a>*/}
                                                    {/*        </li>*/}
                                                    {/*    </ul>*/}
                                                    {/*</div>*/}
                                                    <div className='lmoreTxt d-flex justify-content-between align-items-center'>
                                                        <p className='text-danger' style={{fontSize: '12px'}}>{hourRemaining > 24 ? `available in the next ${hourRemaining%24} ${hourRemaining%24 > 1 ? 'days':'day'}` : `available in the next 12hrs 30mins`}</p>
                                                        <a href={dashUrl} className=''>
                                                            Learn More <i className="fal fa-arrow-right" />
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    )
                                    }


                                })
                            }


                            <div className="col-md-6 col-xl-12">
                                <div
                                    className="appie-blog-item mt-15 wow animated fadeInUp"
                                    data-wow-duration="3000ms"
                                    data-wow-delay="600ms"
                                >

                                    <div className="pt-10 d-flex flex-column gap-2">

                                        <h3 className="title">
                                            <a href={dashUrl}>
                                                Find more opportunities at our marketplace.
                                            </a>
                                        </h3>
                                        <a className='align-self-end' href="https://users.wrenchboard.com/login">
                                            Login now <i className="fal fa-arrow-right" />
                                        </a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </section>
            </>
        );
    }
}

export default CurrentJobsHero;