import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import moment from "moment";
import React, { useEffect, useState } from "react";
import { Calendar, momentLocalizer } from 'react-big-calendar';
import { Link, Redirect, useHistory } from 'react-router-dom';
import { StoreConsumptionService } from '@gtpl/shared-services/procurement'
import { ServiceStatusEnum, UnitRequest } from "@gtpl/shared-models/common-models";
import { Card } from "antd";

const localizer = momentLocalizer(moment);
moment.locale('en-GB');

export function PlanningDashboard() {

  const [calenderData, setCalenderData] = useState<any[]>([])
  const history = useHistory()
  const service = new StoreConsumptionService()
  const [showModal, setShowModal] = useState<boolean>(true)
  const [handleRemarks, showHandleRemarks] = useState<{ modalVisible?: boolean, remarks?: string, assetServiceId?: number }>({ modalVisible: false, remarks: '', assetServiceId: 0 });
  const [events, setEvents] = useState([]);


  useEffect(() => {
    getFutureSoForPlannings();
    // getWarrantyAndInsuranceDate();
  }, [])

  // function content(index) {
  //   return (
  //     <>
  //       <Descriptions column={{ xxl: 4, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }}>
  //         <Descriptions.Item label="Service Name"  >
  //           {calenderData[index]?.serviceName}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Asset Name"  >
  //           {calenderData[index]?.assetName}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Asset Code"  >
  //           {calenderData[index]?.assetCode}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Model"  >
  //           {calenderData[index]?.model}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Location"  >
  //           {calenderData[index]?.locationName}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Service Date"  >
  //           {moment(calenderData[index]?.assetServiceDate).format("DD-MM-YYYY")}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Service Provide"  >
  //           {calenderData[index]?.serviceProvider}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Service Owner"  >
  //           {calenderData[index]?.serviceOwner}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Phone Number"  >
  //           {calenderData[index]?.phoneNumber}
  //         </Descriptions.Item>
  //         <Descriptions.Item label="Service Note"  >
  //           {calenderData[index]?.remarks}
  //         </Descriptions.Item>
  //       </Descriptions>
  //     </>
  //   )
  // }

  // const updateAssetsStatus = (values: any) => {
  //   const status = values.serviceStatus == ServiceStatusEnum.OPEN ? ServiceStatusEnum.INPROGRESS : ServiceStatusEnum.COMPLETE
  //   const req = new AssetByCode(values.assetId, values.assetServiceId, status)
  //   assetsService.updateAssetStatus(req).then((res) => {
  //     if (res.status) {
  //       getDataForServiceCalender()
  //       AlertMessages.getSuccessMessage(res.internalMessage)
  //     } else {
  //       AlertMessages.getErrorMessage(res.internalMessage)
  //     }
  //   }).catch(err => {
  //     AlertMessages.getErrorMessage(err.message);
  //   })
  // }


  function newcontent(index: any) {
    return (
      <div >
        <>SO Number :{calenderData[index].po_number}</><br />
        <>Count :{calenderData[index].totalCount}</> <br />
        <>So Date  :{calenderData[index]?.edlDate ? moment(calenderData[index].edlDate).format('YYYY-MM-DD') : moment(calenderData[index].edlDate).format('YYYY-MM-DD')}</><br />
      </div>
    );
  }



  function handleAddRemarks(rowData) {
    setShowModal(false)
    showHandleRemarks({ modalVisible: true, remarks: rowData.remarks, assetServiceId: rowData.assetServiceId })
  }

  const handleOpenChange = (newOpen: boolean) => {
    setShowModal(newOpen);
  };


  // Get the first Monday in the month
  const NoCurrentTimeLine = () => null;
  const eventsData = calenderData?.map((item, index) => ({
    title: `PO No: ${item.po_number} `,
    // subTitle: `Count: ${item.po_number}`,
    start: new Date(item.edlDate),
    end: new Date(item.edlDate),
  }));


  const mergeArray = [...eventsData]


  console.log(events)
  const formats = {
    // dayFormat: (date, culture, localizer) => localizer.format(date, 'ddd M/D', culture),
    // weekDayFormat: (date, culture, localizer) => localizer.format(date, 'ddd M/D', culture),
    eventTimeRangeFormat: () => null,
    // agendaTimeFormat: () => null,
    // timeGutterFormat: () => '',

  };



  const getFutureSoForPlannings = () => {
    const req = new UnitRequest(Number(localStorage.getItem('unit_id')))
    service.getFutureSoForPlanning(req).then((res) => {
      if (res.status) {
        setCalenderData(res.data);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch((err) => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  console.log(calenderData)


  const eventStyleGetter = (event) => {
    let color = '#DB9314';
    const serviceDate = new Date(event.start);
    if (serviceDate <= new Date()) {
      color = 'red';
    }
    return {
      style: {
        backgroundColor: color,
      },
    };
  };

  return (
    <>
        <div className="App">
          <div style={{ height: 500 }}>
            <Calendar
              events={eventsData}
              startAccessor="start"
              endAccessor="end"
              defaultDate={moment().toDate()}
              localizer={localizer}
              defaultView="month"
              formats={formats}
              eventPropGetter={eventStyleGetter}
              components={{ today: NoCurrentTimeLine }}
              popup={false}
            />
          </div>
        </div>
      {/* <Modal key={handleRemarks.assetServiceId} visible={handleRemarks.modalVisible} footer={false} width='60%' closable={true} onCancel={() => showHandleRemarks({ modalVisible: false })}>
        <AddRemarks values={{ ...handleRemarks }} closeModal={() => { showHandleRemarks({ modalVisible: false }); getDataForServiceCalender() }} />
      </Modal> */}
    </>
  )
}
export default PlanningDashboard;

function getFutureSoForPlanning() {
  throw new Error("Function not implemented.");
}