import React, { useEffect, useState } from 'react';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
import { Button, Card, Drawer, Form, Row, Col, Alert, Select, DatePicker, Anchor,Spin  } from 'antd';

import './notifications-report-pages.css';
import { NotificationsReportGrid } from '@gtpl/pages/attendance-management/attendance-management-components/notifications-report-grid';
import { Logservice } from '@gtpl/shared-services/attendance'
import { NotificationsReport } from '@gtpl/shared-models/gtpl';

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

export function NotificationsReportPages( props: NotificationsReportPagesProps) {
  const logs = new Logservice;
  const [form] = Form.useForm();
  const [data,setData]=useState([]);
  const [logsData, setLogsData] = useState<any[]>([])
  const [showNotificationssReport, setShowNotificationsReport] = useState<Boolean>(true)
  const { Link } = Anchor;
  const [selectedDate, setSelectedDate]= useState('');
  // const viewNotificationsReport= (notificationsData: NotificationsReport, viewOnly: boolean = true) => {
  //   getLogData();
  //   setShowNotificationsReport(true);
  // }
  useEffect(() => {
    getLogData();
    setTimeout(() => setLoading(false), 1000)
  }, [])
  const getLogData= async () => {
    await logs.getLogs().then(res => {
      console.log(res.data);
       if (res.status) { 
         // setData([{message:"1st notify",timestamp:1596119686812}]);
         console.log('logs res');
         setLogsData(res.data);
         console.log('data');
         
         console.log(data);
       } else {
         if (res.intlCode) {
           setLogsData([]);
           
             AlertMessages.getErrorMessage(res.internalMessage);
         } else {
           AlertMessages.getErrorMessage(res.internalMessage);
         }
       }
     }).catch(err => {
       AlertMessages.getErrorMessage(err.message);
       setLogsData([]);      
     })
   }
   const handleChange=(value) =>{
    console.log(value.format('YYYY-MM'));
    setSelectedDate(value.format('YYYY-MM'))
  }
  
  const onReset = () => {
    form.resetFields();
  };
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    setTimeout(() => setLoading(false), 1000)
  }, [])
  return (
    <>
     {loading === false ? (
    <><Anchor affix={false}>
          <Link href="#/dashboard" title="Dashboard" />
        </Anchor>
        <Card title={"Notifications Report"} ></Card>
          {/* <Card title="Notifications Report" style={{ padding: '0px' }}>
            <Form form={form} layout={'inline'} style={{ padding: '0px' }} onFinish={viewNotificationsReport}>
              <Row gutter={[32, 32]}>
                <Col>
                  <Form.Item name="selectYear"
                    label="Select Date"
                    rules={[
                      {
                        required: false,
                        message: "Select Year"
                      },
                    ]}>
                    <DatePicker onChange={handleChange} picker="date" />
                  </Form.Item>
                </Col>
              </Row>
              <Row gutter={[32, 32]}>
                <Col>
                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      Get Report
                    </Button>
                  </Form.Item>
                </Col>
                <Col>
                  <Form.Item>
                    <Button htmlType="button" onClick={onReset}>
                      Reset
                    </Button>

                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Card> */}
  
           { showNotificationssReport && <Card  bodyStyle={{ overflow: 'auto' }}>
    <NotificationsReportGrid  NotificationsReportData={logsData} />
     </Card>}</>
    ): (
        <div className="spins">
        <Spin size="large"/>
        </div>
      )}
      </>
    )
}

export default NotificationsReportPages;