import React, { useEffect, useState } from 'react';
import type { ColumnProps, ColumnsType } from 'antd/es/table';
import { Card,Table, Input, Form, Col, Row, Button, DatePicker, Select,Typography} from 'antd';
import {AssetService} from 'libs/shared-services/asset-management/src/lib/assets.service';
import {AlertMessages} from '@gtpl/shared-utils/alert-messages';
import './pages-asset-management-asset-management-components-asset-po-view.css';
import { EmployeeDto } from '@gtpl/shared-models/masters';
import {EmployeeService} from '../../../../../../shared-services/masters/src/lib/employee-details.service';

import {AssetById} from 'libs/shared-models/asset-management/src/lib/open-assets/asset-by-id.dto';
import moment from 'moment';
import {ItemsService} from 'libs/shared-services/masters/src/lib/items-service';
import { ItemsDto } from '@gtpl/shared-models/masters';
import { AssetDto } from "libs/shared-models/asset-management/src/lib/open-assets/assets.dto";
import { AssetByStatus } from 'libs/shared-models/asset-management/src/lib/open-assets/asset-by-status.dto';

/* eslint-disable-next-line */
export interface HistoryReportProps {}

export function HistoryReport(
  props: HistoryReportProps
) {
  const [item,setItem] = useState<ItemsDto[]>([]);
  
  

  const [page,setPage] = useState<number>(1);
  const [employeeData,setEmployeeData] = useState<EmployeeDto[]>([]);

  const [form] = Form.useForm();
  const Option = Select;
 const {RangePicker}= DatePicker;
 const [data,setData] = useState<any>([]);
 const [locationData,setLocationData] = useState<any>([]);
 const [checkinData,setCheckinData] = useState<any>([]);
 const [maintenanceData,setMaintenanceData] = useState<any>([]);
 const [assetCodeData,setAssetCodeData] = useState<AssetDto[]>([]);
 const assetsService = new AssetService(); 
 const employeeService = new EmployeeService();
 const { Text } = Typography;

 let diff = 0;
 let date;
 let todate;
 
 useEffect(() => {
  getAssetCode();
  employeeDetails();

},[])


 const assetInformation = () => {
   const id = form.getFieldValue('assetCode') ? form.getFieldValue('assetCode') : null;
  const fromDate = form.getFieldValue('date') ? moment(form.getFieldValue('date')[0]).format('YYYY-MM-DD') : null;
  const toDate = form.getFieldValue('date') ? moment(form.getFieldValue('date')[1]).format('YYYY-MM-DD') : null;
  const req = new AssetByStatus(id,null,null,null,null,null,fromDate,toDate)
    assetsService.historyReport(req).then(res => {
      if(res.status){
        setData(res.data[0])
        setLocationData(res.data[1])
        setCheckinData(res.data[2])
        setMaintenanceData(res.data[3])
        AlertMessages.getSuccessMessage(res.internalMessage)
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    })
 }
 const employeeDetails = () => {
  employeeService.getAllActiveEmployees().then((res)=>{
    // console.log(props?.assetData)
    if(res.status) {
      setEmployeeData(res.data)
    } else {
      AlertMessages.getErrorMessage(res.internalMessage)
    }
  })
}


  const getAssetCode = () => {
    assetsService.getallAssets().then((res) => {
      if(res.status) {
        setAssetCodeData(res.data);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage)
      }
    })
  }

  const onReset = () => {
    form.resetFields();
    setData([]);

  }
  const columns: ColumnProps<any>[] = [
    {
      title: "S.No",
      key: "sno",
      width: "30px",
      responsive: ["sm"],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title: "Asset Category",
      dataIndex: "item_sub_category",
      align:"left",
      width:120,
      sorter: (a, b) => a.item_sub_category.localeCompare(b.item_sub_category),
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: "Asset Name",
      dataIndex: "item_name",
      align:"left",
      width:120,
      sorter: (a, b) => a.item_name.localeCompare(b.item_name),
      sortDirections: ['descend', 'ascend']
    }, 
    {
      title: "Asset Code",
      dataIndex: "assets_code",
      align:"left",
      width:120,
    },
    
    {
      title: "Location",
      dataIndex: "location_name",
      align:"left",
      width:120,
      render:(text,record) => {
        return (
          <>
            {record.location_name ? record.location_name : '-'}
          </>
        )
      },
    },
    {
      title: "Purchase Date",
      dataIndex: "date_of_purchased",
      align:"right",
      width:120,
      render:(text,record) => {
        return(
          <>
          {record.date_of_purchased? moment(record.date_of_purchased).format('YYYY-MM-DD'): 'N/A'}
          </>
        )
      }
    },
    {
      title: "AMC",
      dataIndex: "name",
      align:"left",
      width:120,
      render:(text,record) => {
        return(
          <>
          {record.name? record.name : 'No'}
          </>
        )
      }
    },
    {
      title: "Warranty",
      dataIndex: "warrenty_expired_date",      
      align:"right",
      width:120,
      // sorter: {
      //   compare:(a, b) =>{
      //     a= a.created_date.toLowerCase()
      //     b = b.created_date.toLowerCase()
      //     return a > b ? -1 : b > a ? 1:0
      //   },
      // },
      render:(text,record) => {
        return(
          <>
          {record.warrenty_expired_date? moment(record.warrenty_expired_date).format('YYYY-MM-DD'): 'N/A'}
          </>
        )
      }
    },
    {
      title: "Insurance",
      dataIndex: "insurance_date",
      align:"right",
      width:120,
      render:(text,record) => {
        return(
          <>
          {record.insurance_date? moment(record.insurance_date).format('YYYY-MM-DD'): 'N/A'}
          </>
        )
      }
    },
    {
      title: "Expiry Date",
      dataIndex: "expired_date",
      align:"right",
      width:120,
      render:(text,record) => {
        return(
          <>
          {record.expired_date? moment(record.expired_date).format('YYYY-MM-DD'): 'N/A'}
          </>
        )
      }
    },
    {
      title: "Cost of Asset",
      dataIndex: "asset_cost",
      align:"right",
      width:120,
      render:(text,record) => {
        return (
          <>
            {Number(record.asset_cost).toFixed(0) ? Number(record.asset_cost).toFixed(0) : 'N/A'}
          </>
        )
      }
    },
    {
      title: "Status",
      dataIndex: "status",
      align:"left",
    },
    // {
    //   title: "Aging",
    //   dataIndex: "age",
    //   render:(text,record,index) => {        
    //       todate = moment(moment(Date.now()).format('YYYY-MM-DD'));
    //       date = moment(moment(record.transactionDate).format('YYYY-MM-DD')); 
    //       diff = (todate - date) / 864e5;
    //       if(diff < 0) {
    //         diff = -diff;
    //       }
    //     return(
    //       <>
    //       {record.transactionDate ?  diff : '-'}
    //       </>
    //     )
        
    //   }
    // },
    {
      title: ' Asset Age',
      dataIndex: 'assetAge',
      align:"right",
      render:(text,record) => {
        todate = moment(moment(Date.now()).format('YYYY-MM-DD'));
        date = moment(moment(record.date_of_purchased).format('YYYY-MM-DD')); 
        diff = (todate - date) / 864e5;
        return(
          <>
          {record.date_of_purchased ? diff : null}
          </>
        )
      }
    },
  ];

  const columns1: ColumnProps<any>[] = [
    {
      title: "S.No",
      key: "sno",
      width: "30px",
      responsive: ["sm"],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title: "Asset Name",
      dataIndex: "item_name",
      width: 150,
         align:"left",
      sorter:(a,b)=>a.item_name.localeCompare(b.item_name),
      sortDirections:['descend','ascend']
    },
    {
      title: "Asset Code",
      dataIndex: "assets_code",
      width: 150,
         align:"left",
      sorter:(a,b)=> a.assets_code.localeCompare(b.assets_code),
      sortDirections :['descend','ascend'] 
    },
    // {
    //   title: "Asset Condition",
    //   dataIndex: "assetCondition",
    //   width: 130,
    //   align: "center"
    // },
    {
      title: "Owner",
      dataIndex: "employee_name",
      width: 130,
      align:"left",
      sorter: (a, b) =>a.employee_name.localeCompare(b.employee_name),
      sortDirections:['descend','ascend']
    },
    // {
    //   title: "Maintenance frequency in Days",
    //   dataIndex: "maintainanceFrequencyInDays",
    //   width: 130,
    //   align: "center",
    //   render:(text,record) => {
    //     return(
    //       <span>
    //         {record.maintainanceFrequencyInDays ? record.maintainanceFrequencyInDays: '-'}
    //       </span>
    //     )
    //   }
    // },
    {
      title: "Repair Start Date",
      dataIndex: "created_at",
      width: 130,
         align:"right",
      render:(text,record) => {
        return(
          <span>
            {record.created_at ? moment(record.created_at ).format('YYYY-MM-DD'): '-'}
          </span>
        )
      }
    },
    {
      title: "Completion Date",
      dataIndex: "updated_at",
      width: 130,
         align:"right",
      render:(text,record) => {
        return(
          <span>
            {record.updated_at ? moment(record.updated_at).format('YYYY-MM-DD') : '-'}
          </span>
        )
      }
    },
    {
      title: "Total No of Days",
      dataIndex: "days",
      width: 130,
         align:"right",
      render:(text,record) => {
        todate = moment(moment(record.created_at).format('YYYY-MM-DD'));
      date = moment(moment(record.updated_at).format('YYYY-MM-DD')); 
      diff = (todate - date) / 864e5;
        return(
          <>
          {diff ? diff : 0}
          </>
        )
      }
    },
    {
      title: "Cost of Repair",
      dataIndex: "cost_of_repair",
      width: 130,
         align:"right",
      render:(text,record) => {
        return(
          <span>
            {record.cost_of_repair ? record.cost_of_repair : 'NA'}
          </span>
        )
      }
    },
    {
      title: "Damaged Reason",
      dataIndex: "damage_reason",
      width: 130,
         align:"left",
      render:(text,record) => {
        return(
          <span>
            {record.damage_reason ? record.damage_reason: 'NA'}
          </span>
        )
      }
    }
  ];

  const columns2: ColumnProps<any>[] = [
    {
      title: "S.No",
      key: "sno",
      width: "30px",
      responsive: ["sm"],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title: "Asset Name",
      dataIndex: "item_name",
      width: 150,
      align: "left"
    },
    // {
    //   title: "Asset Code",
    //   dataIndex: "assets_code",
    //   width: 130,
    //   align: "left"
    // },
    {
      title: "Employee Name",
      dataIndex: "employee_name",
      width: 130,
      align: "left"
    },
    {
      title: "Employee Number",
      dataIndex: "mobile_no",
      width: 130,
      align: "right"
    },
    // {
    //   title: "Cost of Asset",
    //   dataIndex: "assetCost",
    //   width:130,
    //   align:"right",
    //   render:(text,record) => {
    //     return (
    //       <>
    //         {record.assetCost ? record.assetCost : 'NA'}
    //       </>
    //     )
    //   }
    // },
    {
      title: "Check In ",
      dataIndex: "check_in",
      width: 150,
      align: "right",
      render:(data,record) => {
        return (
          <span>
            {record.check_in ? moment(record.check_in).format('YYYY-MM-DD') : '-'}
          </span>
        )
      }
    },
    {
      title: "Check In Reason",
      dataIndex: "checkin_reason",
      width: 150,
      align: "right",
    },
    {
      title: "Check Out",
      dataIndex: "check_out",
      width: 150,
      align: "right",
      render:(data,record) => {
        return (
          <span>
            {record.check_out ? moment(record.check_out).format('YYYY-MM-DD') : '-'}
          </span>
        )
      }
    },
    {
      title: "Check Out Reason",
      dataIndex: "checkout_reason",
      width: 150,
      align: "right",
    }
  ];

  const columns4 : ColumnProps<any>[] =[
    {
      title: 'S.No',
      key: 'sno',
      width: '30px',
      responsive: ['sm'],
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },
    {
      title:'Asset Category',
      dataIndex:'item_sub_category',
      width:130,
      align:"left",
    },
    {
      title:'Asset Name',
      dataIndex:'item_name',
      width:130,
      align:"left",
    },
    {
      title:'Asset Code',
      dataIndex:'assets_code',
      width:130,
      align:"left",
    },
    // {
    //   title:'Location Id',
    //   dataIndex: 'locationId',
    //   width:130,
    //   align:"left",
    // },
    {
      title:'Current Location',
      dataIndex:'location_name',
      width:130,
      align:"left",
    },
    // {
    //   title:'Adminstrator Name',
    //   dataIndex:'createdUser',
    //   width:130,
    // },
    
  ]


  return(
    <Card title={<span style={{color:'white'}}>History Report</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }} >  <br></br>
    <Form form={form} layout='vertical'  onFinish={assetInformation}>
      {/* <Col   xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5, offset: 1 }}
            lg={{ span: 5, offset: 1 }}
            xl={{ span: 5, offset: 1 }}
            style={{  margin: '1%'}}>
            
      <Form.Item name="dateSearch" >
      <RangePicker/>
      </Form.Item>
      </Col> */}
    <Row gutter={[24,24]}>
    <Col   xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5}}
            lg={{ span: 5}}
            xl={{ span: 5 }}
            >
      <Form.Item name="date" label='Search by Date' >
      <RangePicker/>
      </Form.Item>
      </Col>
            <Col   xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5}}
            lg={{ span: 5}}
            xl={{ span: 5 }}
            >
      <Form.Item name="assetCode"label='Asset Code'>
              <Select 
            showSearch
            allowClear
            optionFilterProp="children"
            placeholder='Asset Code'
            // onChange={onCodeChange}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {assetCodeData.map((assets) => {
              return <Option key={assets.assetsCode} value={assets.assetsCode}>{`${assets.itemName} -- ${assets.assetsCode}`}</Option>
            })
            }
          </Select>
        </Form.Item>
      </Col>
            {/* <Col   xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 5}}
            lg={{ span: 5}}
            xl={{ span: 5 }}
            >
      <Form.Item name="ownerOfAsset" label='Owner of Asset' >
      <Select
      placeholder= "Owner of Asset"
                 optionFilterProp="children"
                 filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
                showSearch
                allowClear
                >
            {employeeData.map((employee) => {
              return <Option key={employee.employeeId} value={employee.employeeId}>{employee.employeeName}</Option>
            })}
        </Select>
      </Form.Item>
      </Col> */}
      
      <Col  style={{marginTop:'2.2%'}}>
        <Button type="primary" htmlType="submit">
         Search
        </Button>
        </Col>
        <Col style={{marginTop:"2.2%"}}>
        <Button htmlType="button"  onClick={onReset}>
          Reset
        </Button>
        </Col>
      </Row>
    </Form> 
    <Card title={<span style={{color:'white'}}>In Stock</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
    <Table 
      columns={columns} 
      dataSource={data} 
      bordered
    />
   </Card>
   <Card title={<span style={{color:'white'}}>Location Transactions</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
    <Table 
      columns={columns4} 
      dataSource={locationData} 
      bordered
    />
    </Card>
    <Card title={<span style={{color:'white'}}>Assignment Details</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
    <Table 
      columns={columns2} 
      dataSource={checkinData} 
      bordered
    />
    </Card>
    <Card title={<span style={{color:'white'}}>Maintenance Details</span>}
    style={{textAlign:'center'}} headStyle={{backgroundColor: '#69c0ff', border: 0 }}>
    <Table 
      columns={columns1} 
      dataSource={maintenanceData} 
      bordered
    />
    </Card>
    </Card>
  )}

export default HistoryReport;