"use client"
import React, { useEffect, useState } from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";
import { useQuery } from "@tanstack/react-query";
import { contactData } from "../../services/services";
import queryKeys from "../../services/queryKeys";
import getCustomTime from "../../utils/getCustomTime";

export default function Contacts(){

    const {data:contacts, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.contacts,
        queryFn: () => contactData()
    })

    const contactsData = contacts?.data?.calendar_data?.contacts // LIST OF CONTACTS
    const contactsCategory = contacts?.data?.calendar_data?.category // LIST OF CATEGORY

    const [activeCategoryUID, setActiveCategoryUID] = useState('0') // HOLDS VALUE OF THE ACTIVE CATEGORY

    const [activeContactUID, setActiveContactUID] = useState(null)
    const [activeDetail, setActiveDetail] = useState(null)

    const [filteredContactData, setFiltererdContactData] = useState(null)

    const changeActiveUID = (uid) => {
        setActiveContactUID(uid)
        let detail = contactsData.filter(item => item.uid == uid)
        setActiveDetail(detail)
    }

    const changeActiveCategoryUID = (id) => {
        let filteredConData = []
        setActiveCategoryUID(id)
        if(id == '0'){
            filteredConData = contactsData
        }else{
            filteredConData = contactsData.filter(item => item.category == id)
        }
        setFiltererdContactData(filteredConData)
        changeActiveUID(filteredConData[0]?.uid)
    }

    return(
        <>
            <BreadcrumbComBS title='Contacts' paths={['Dashboard', 'Contacts']} />
            {isFetching ? 
                <>
                    <div className="row">
                        <div className="col-12">
                            <p className='text-mute'>Loading...</p>
                        </div>
                    </div>
                </>
                : isError ?
                <div className="row">
                    <div className="col-12">
                        <p className='text-danger'>{error.message}</p>
                    </div>
                </div>
                :
                <div className="row">
                    {/*<div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
                    <div className="col-12">
                        <div className="card card-statistics mail-contant">
                            <div className="card-body p-0">
                                <div className="row no-gutters">
                                    <div className="col-md-4 col-xxl-2 col-md-4">
                                        <div className="mail-sidebar">
                                            <div className="row justify-content-center">
                                                <div className="d-none col-12">
                                                    <div className="text-center mail-sidebar-title px-4">
                                                        <a href="#" className="btn btn-primary btn-block py-3 font-weight-bold font-18"><i className="fa fa-plus pl-2"></i></a>
                                                    </div>
                                                </div>
                                                <div className="col-12">
                                                    <div className="px-4 py-4">
                                                        <ul className="pl-0">
                                                            <li className="py-2">
                                                                <a href="#">
                                                                                <span className="nav align-items-center">
                                                                                            <span>
                                                                                                <i className="fa fa-envelope-o text-primary pr-4"></i>
                                                                                            </span>
                                                                                <span>
                                                                                                <span>Inbox</span>
                                                                                </span>
                                                                                <span className="nav-item ml-auto text-right">
                                                                                                <span className="badge badge-pill badge-primary float-right">{contactsData?.length}</span>
                                                                                </span>
                                                                                </span>
                                                                </a>
                                                            </li>
                                                            <li className="py-2">
                                                                <a href="#">
                                                                                <span className="nav align-items-center">
                                                                                            <span>
                                                                                                <i className="fa fa-paper-plane-o pr-4"></i>
                                                                                            </span>
                                                                                <span>
                                                                                                <span>Replied Mail</span>
                                                                                </span>
                                                                                </span>
                                                                </a>
                                                            </li>

                                                        </ul>

                                                        <ul className="pl-0 mt-5">
                                                            <li className="py-2" onClick={()=>changeActiveCategoryUID('0')} style={{cursor: 'pointer'}}>
                                                                    <div>
                                                                        <span className="nav align-items-center">
                                                                            <span>
                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == '0' ? 'text-primary' : 'text-warning'}`}></i>
                                                                            </span>
                                                                        <span>
                                                                            <span>All</span>
                                                                        </span>
                                                                        </span>
                                                                    </div>
                                                                </li>
                                                            {contactsCategory && contactsCategory.map(item => (
                                                                <li key={item?.product_id} className="py-2" onClick={()=>changeActiveCategoryUID(item?.product_id)} style={{cursor: 'pointer'}}>
                                                                    <div>
                                                                        <span className="nav align-items-center">
                                                                            <span>
                                                                                <i className={`fa fa-circle-o pr-4 ${activeCategoryUID == item?.product_id ? 'text-primary' : 'text-warning'}`}></i>
                                                                            </span>
                                                                        <span>
                                                                            <span>{item?.title}</span>
                                                                        </span>
                                                                        </span>
                                                                    </div>
                                                                </li>
                                                            ))}
                                                            {/* <li className="py-2">
                                                                <a href="#">
                                                                                <span className="nav align-items-center">
                                                                                            <span>
                                                                                                <i className="fa fa-circle-o pr-4 text-warning"></i>
                                                                                            </span>
                                                                                <span>
                                                                                                <span>Work</span>
                                                                                </span>
                                                                                </span>
                                                                </a>
                                                            </li>
                                                            <li className="py-2">
                                                                <a href="#">
                                                                                <span className="nav align-items-center">
                                                                                            <span>
                                                                                                <i className="fa fa-plus pr-4"></i>
                                                                                            </span>
                                                                                <span>
                                                                                                <span>Add Category</span>
                                                                                </span>
                                                                                </span>
                                                                </a>
                                                            </li> */}
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-md-8  col-xxl-4 border-md-t">
                                        <div className="mail-content  border-right border-n h-100">
                                            <div className="mail-search border-bottom">
                                                <div className="row align-items-center mx-0">
                                                    <div className="col-12">
                                                        {/*<div className="form-group pt-3">*/}
                                                        {/*    <input type="text" className="form-control" id="search" placeholder="Search.." />*/}
                                                        {/*        <i className="fa fa-search"></i>*/}
                                                        {/*</div>*/}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="mail-msg scrollbar scroll_dark">
                                                {contactsData && (filteredContactData || contactsData).map((contact, index)=> {
                                                    const isActive = (contact.uid == activeContactUID) || (!activeContactUID && index == 0)
                                                    return (
                                                        <div key={contact.uid} onClick={()=>changeActiveUID(contact.uid)} className={`mail-msg-item ${isActive && 'bg-light'}`}>
                                                            <a href="#">
                                                                <div className="media align-items-center">
                                                                    <div className="mr-3">
                                                                        <div className="bg-img">
                                                                            <img src={getImage("avtar/01.jpg")} className="img-fluid" alt="user" />
                                                                        </div>
                                                                    </div>
                                                                    <div className="w-100">
                                                                        <div className="mail-msg-item-titel justify-content-between">
                                                                            <p>{contact.sender}</p>
                                                                            {/* <p className="d-none d-xl-block">06:59 <span> PM </span></p> */}
                                                                            <p className="d-none d-xl-block"><span>{new Date(contact.added).toDateString()}</span></p>
                                                                        </div>
                                                                        <h5 className="mb-0 my-2">{contact.title}</h5>
                                                                        <p>{contact.message.length < 100 ? contact.message : contact.message.substring(0,101) + ' ...' }</p>
                                                                        <p className="d-xl-none">
                                                                            <span>
                                                                            {new Date(contact.added).toDateString()}
                                                                            {/* {getCustomTime(contact.added)} */}
                                                                            </span>
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    )
                                                })}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="col-xxl-6 border-t border-xxl-t">

                                        <div className="mail-chat py-5 px-5">
                                            <div className="media align-items-center">
                                                <div className="bg-img mr-3">
                                                    <img  src={getImage("avtar/03.jpg")}  className="img-fluid" alt="user" />
                                                </div>
                                                <div>
                                                    <h4 className="mb-0">{activeContactUID ? activeDetail[0].sender : contactsData[0].sender}</h4>
                                                    <p>{activeContactUID ? new Date(activeDetail[0].added).toDateString() : new Date(contactsData[0].added).toDateString()}</p>
                                                </div>
                                            </div>
                                            <div className="mt-4 d-flex justify-content-between">
                                                <div>
                                                    <h3>{activeContactUID ? activeDetail[0].title : contactsData[0].title}</h3>
                                                </div>
                                                <div className="d-flex">
                                                    {/*<a href="javascript:void(0)"><i className="fa fa-reply font-22 pr-3"></i></a>*/}
                                                    {/*<a href="javascript:void(0)"><i className="fa fa-print font-22"></i></a>*/}
                                                </div>
                                            </div>
                                            <div>
                                                <p>{activeContactUID ? activeDetail[0].message : contactsData[0].message}</p>
                                                {/* <p className="my-4">hey adminjon...</p>
                                                <p className="mb-2">I truly believe Augustine’s words are true and if you look at history you know it is true. There are many people in the world with amazing talents who realize only a small percentage of their potential. We all know people who live this truth.</p>
                                                <p>We also know those epic stories, those modern-day legends surrounding the early failures of such supremely successful folks as Michael Jordan and Bill Gates. We can look a bit further back in time to Albert Einstein or even further back to Abraham Lincoln. What made each of these people so successful? Motivation.</p>
                                                <p>We know this in our gut, but what can we do about it? How can we motivate ourselves? One of the most difficult aspects of achieving success is staying motivated over the long haul.</p> */}
                                                {/*<div className="my-5">*/}
                                                {/*    <p>Have lovely Day,</p>*/}
                                                {/*    <p>adminjon</p>*/}
                                                {/*</div>*/}
                                            </div>
                                        </div>

                                        <div className="bg-light mail-f px-4 py-3">
                                            <div className="py-2 bg-white px-4 py-3 d-flex justify-content-between">
                                                <p>Click here to <a href="#editer" data-toggle="collapse" className="text-primary px-1">Reply</a>or<a href="#forward" data-toggle="collapse" className="text-primary px-1">Forward</a></p>
                                                <a href="#" className="text-primary"><i className="fa fa-microphone"></i></a>
                                            </div>
                                            <div className="collapse" id="editer">
                                                <div className="form-group">
                                                    <textarea className="form-control mt-3" id="exampleFormControlTextarea1" rows="3" placeholder="Type here..."></textarea>
                                                </div>
                                            </div>
                                            <div className="collapse" id="forward">
                                                <div className="form-group">
                                                    <input className="form-control mt-3" id="exampleFormControl" placeholder="Email Address" />
                                                </div>
                                            </div>
                                            <div className="d-flex align-items-center justify-content-between py-2">
                                                <div>
                                                    {/*<ul className="nav">*/}
                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-clip font-20"></i></a></li>*/}
                                                    {/*    <li className="nav-item pr-3"><a href="javascript:void(0)"><i className="ti ti-face-smile font-20"></i></a></li>*/}
                                                    {/*    <li className="nav-item"><a href="javascript:void(0)"><i className="ti ti-gallery font-20"></i></a></li>*/}
                                                    {/*</ul>*/}
                                                </div>
                                                <div>
                                                    {/*<a href="javascript:void(0)" className="btn btn-primary"><span>Send</span> <i className="fa fa-paper-plane"></i></a>*/}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </>
    )
}