import React, { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import useGrowl, { growlTypes } from '../../Utils/useGrowl';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ScrollPanel } from "primereact/scrollpanel";
import { Avatar } from 'primereact/avatar';
import assetsImg from '../../Utils/assets';
import { Button } from 'primereact/button';
import RightService from '../../Service/RightService';
import ParameterService from "../../Service/ParameterServices";
import { MultiSelect } from "primereact/multiselect";
import { getKeyValue, toDateString } from "../../Utils/Utils";
import AuthService from "../../Service/AuthService"
import ParameterServices from "../../Service/ParameterServices";
import { Dropdown } from "primereact/dropdown";
import OrganizationService from "../../Service/OrganizationService";
import {TreeSelect} from "primereact/treeselect";



const OrganizationRightStatusDashboard = (props) => {

    const [t] = useTranslation();
    const [show] = useGrowl();
    const [selectedRow, setSelectedRow] = useState(null);
    const [selectedTitle, setSelectedTitle] = useState(null);
    const [allTitleTypes, setAllTitleTypes] = useState([]);
    const [statusDashboard, setStatusDashboard] = useState([]);
    const [PersonFullNameList, setPersonFullNameList] = useState([]);
    const [allTitles, setAllTitles] = useState([]);
    const [allPositions, setAllPositions] = useState([]);
    const [filterPosition, setFilterPosition] = useState([]);
    const [mailButtonDisabled, setMailButtonDisabled] = useState(true);
    const [allOrganizations, setallOrganizations] = useState([]);
    const [OrganizationTree, setOrganizationTree] = useState([]);
    const [excelData, setExcelData] = useState([]);
    const [expandedRows, setExpandedRows] = useState(null);
    const [filteredData, setFilteredData] = useState('');


    const [filters, setFilters] = useState({
        Person: [],
        Title: [],
        Position: [],
        NumberOfDaysSubjestToRight: null,
        TotalDeservedRight: null,
        BalanceRigth: null,
        Organization: [],
        UpperOrganization: [],
        FirstManager: [],
        SecondManager: []
    });

    const initialFilters = {
        Person: [],
        Title: [],
        Position: [],
        NumberOfDaysSubjestToRight: null,
        TotalDeservedRight: null,
        BalanceRigth: null,
        Organization: [],
        UpperOrganization: [],
        FirstManager: [],
        SecondManager: []
    }

    const onFilterChange = (e) => {
        const { key, value } = getKeyValue(e);
        setFilters({ ...filters, [key]: value });
    };

    useEffect(() => {
        ParameterService.getAllTitles().then((result) => {
            setAllTitleTypes(result);
        });
        OrganizationService.getAll().then((result) => {
            setallOrganizations(result.filter(x => x.OrganizationType == 2 || x.OrganizationType == 3));
        });
       
        excelDownload()
    }, []);

    useEffect(() => {

        let personID = AuthService.getCurrentUser()?.Person?.id;

        // RightService.getPersonFullNameList(personID).then((result) => {
        //     setPersonFullNameList(result);
        // });

        ParameterServices.getAllTitles().then((result) => {
            setAllTitles(result);
        });

        ParameterServices.getAllTaskNames().then((result) => { //DAHA SONRA BACK OLUŞUNCA TASKNAME LERİ ÇEKECEK
            setAllPositions(result);
        });

    }, [])

    const personNamesTemplate = () => {
        {
            let data = props.data;   
            let personNames = [];
            personNames = data.map(({ person_id, FullName }) => ({ person_id, FullName }));
            setPersonFullNameList(personNames);
        }
    };

    useEffect(() => {
        personNamesTemplate()
    }, []);

    const filterDataTable = () => {
        return props.data.filter(
            (item) =>
                (filters.Person.length === 0 || (filters.Person && item.person_id && filters.Person.includes(item.person_id))) &&
                (filters.Title.length === 0 || (filters.Title && item.TitleId && filters.Title == item.TitleId)) &&
                (filters.Position.length === 0 || (filters.Position && item.PositionId && filters.Position.includes(item.PositionId))) &&
                (filters.UpperOrganization.length === 0 || (filters.UpperOrganization && item.UpperOrgId && filters.UpperOrganization == item.UpperOrgId)) &&
                (filters.Organization.length === 0 || (filters.Organization && item.OrganizationId && filters.Organization == item.OrganizationId)) 


            // (filters.NumberOfDaysSubjestToRight === 0 || (filters.NumberOfDaysSubjestToRight && item.NumberOfDaysSubjestToRight && filters.NumberOfDaysSubjestToRight.includes(item.NumberOfDaysSubjestToRight))) &&
            // (filters.TotalDeservedRight === 0 || (filters.TotalDeservedRight && item.TotalDeservedRight && filters.TotalDeservedRight.includes(item.TotalDeservedRight))) &&
            // (filters.BalanceRigth === 0 || filters.BalanceRigth && item.BalanceRigth && filters.BalanceRigth.includes(item.BalanceRigth))  
        );
    };
    const filterResult = filterDataTable();



    const personFilter = <MultiSelect
        value={filters.Person}
        name="Person"
        options={PersonFullNameList}
        onChange={onFilterChange}
        optionLabel="FullName"
        optionValue="person_id"
        placeholder="Seçiniz.."
        filter
        className="multiselect-custom"
        panelFooterTemplate={panelFooterTemplate}
    />

    const panelFooterTemplate = () => {
        const selectedItems = filters.Person;
        const length = selectedItems ? selectedItems.length : 0;
        return (
            <div className="p-py-2 p-px-3">
                <br />
                <b>{length}</b> çalışan seçildi..
            </div>
        );
    }

    const titleFilter = <Dropdown
        value={filters.Title}
        name="Title"
        options={allTitles}
        onChange={(e) => {
            onFilterChange(e);
            let id = []
            id.push(e.target.value)
            ParameterServices.getPositionFilterByTitle(id).then((data) => {
                setFilterPosition(data)
            })
        }}
        optionLabel="Name"
        optionValue="id"
        placeholder="Seçiniz.."
        filter
        className="multiselect-custom"
    />

    const positionFilter = <MultiSelect
        value={filters.Position}
        name="Position"
        options={filterPosition}
        onChange={onFilterChange}
        optionLabel="Name"
        optionValue="id"
        placeholder="Seçiniz.."
        filter
        className="multiselect-custom"
        disabled={filters.Title == null || filters.Title == "" ? true : false}
    />

    const upperOrganizationFilter = <Dropdown 
    headerStyle={{ width: "8em", textAlign: "center" }}
    value={filters.UpperOrganization}
    name="UpperOrganization"
    options={allOrganizations} 
    onChange={(e) => {
        onFilterChange(e);
        OrganizationService.getOrganizationTree().then((data) => {
            let root = [];
            if(data[0].id == e.value) {
                root = data[0];
            } else {
                root = data[0].children.find(a => a.id == e.value);
            }
            setOrganizationTree(root.children);
        })
    }}
    optionLabel="Name"  
    optionValue="id" 
    placeholder="Seçiniz.."
    filter
    className="multiselect-custom"
    />

    const organizationFilter = <TreeSelect
    headerStyle={{ width: "8em", textAlign: "center" }}
    value={filters.Organization}
    name="Organization"
    options={OrganizationTree} 
    onChange={onFilterChange}
    optionLabel="Name"  
    optionValue="id" 
    placeholder="Seçiniz.."
    filter
    className="multiselect-custom"
    disabled={filters.UpperOrganization == null || filters.UpperOrganization == "" ? true : false}
    />

    const excelDownload = () => {
        {
            let data = props.data;   
            let excelRightState = [];
            if (data && data.length > 0) {
                data.forEach((r) => {
                    excelRightState.push({
                        Ad_Soyad: r.FullName,
                        Görev_Adı: r.Position,
                        Unvan: r.Title,
                        Birim: r.Organization,
                        Fiili_Çalışma_Şirketi: r.UpperOrganization,
                        Bağlı_Olduğu_Birinci_Yönetici: r.FirstManager,
                        Bağlı_Olduğu_İkinci_Yönetici: r.SecondManager,
                        Limak_Kıdemi: r.NumberOfDaysSubjestToRight,
                        Kalan_İzin: r.BalanceRight
                    });
                });
            }
            setExcelData(excelRightState);
        }
    };

    const exportExcel = () => {
        import('exceljs').then(exceljs => {
          const workbook = new exceljs.Workbook();
          const worksheet = workbook.addWorksheet('data');
          const headerRow = Object.keys(excelData[0]);
          worksheet.addRow(headerRow);
          excelData.forEach(rowData => {
            const rowValues = Object.values(rowData);
            worksheet.addRow(rowValues);
          });
          const columns = worksheet.columns;
          columns.forEach(column => {
            let maxLength = 0;
            column.eachCell(cell => {
              const length = cell.value ? cell.value.toString().length : 0;
              maxLength = length > maxLength ? length : maxLength;
            });
            column.width = maxLength + 2;
            column.alignment = { horizontal: 'center' };
          });
          const headerRowNumber = 1;
          const headerRowCells = worksheet.getRow(headerRowNumber).eachCell((cell) => {
            cell.font = {
              bold: true
            };
          });  
          workbook.xlsx.writeBuffer().then(buffer => {
            saveAsExcelFile(buffer, 'OrganizationRightStatusDashboard');
          });
        });
      };
      
      const saveAsExcelFile = (buffer, fileName) => {
        import('file-saver').then(FileSaver => {
          let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
          let EXCEL_EXTENSION = '.xlsx';
          const data = new Blob([buffer], {
            type: EXCEL_TYPE
          });
          FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
        });
      };

    const representativesItemTemplatePicture = (rowData) => {
        return (
            <div className="p-multiselect-representative-option">
                <div>
                    <Avatar imageAlt={rowData.name} image={rowData.picture ? rowData.picture : assetsImg().avatarLogoImg}
                        className="p-mr-2" size="large" shape="circle" style={{width: '50px', height: '50px' }} />
                    {/* <img alt={rowData.name} src={rowData.picture ?? "assets/layout/images/avatar.svg"}
                         style={{width: "3.5vw", height: "3.5vw", background: "#007ad9", borderRadius: 120 / 2}}
                    /> */}
                    {/* <div className="image-text">{rowData.FullName}</div>
                    <div className="image-text">{rowData.Title}</div> */}
                </div>

            </div>
        );
    };
    const representativesItemTemplate = (rowData) => {
        return (
            <div className="p-multiselect-representative-option">
                <div>
                    <div className="image-text" style={{ fontWeight: "Bold" }}>{rowData.FullName}</div>
                    {/* <div className="image-text" style={{fontStyle: "italic"}}>{rowData.Title}</div> */}
                </div>

            </div>
        );
    };

    const mailGonder = () => {

        const requestDataList = [];
        selectedRow.forEach((data) => {
            var requestData = {
                fullName: data.FullName,
                email: data.email,
                balanceRigth: data.BalanceRigth
            }
            requestDataList.push(requestData);
        })
        RightService.postSendMail(requestDataList)
            .then((result) => {
                show(growlTypes.success, t("organization.deliveryCompleted"))
            })

    };

    const FilterPersonAge = (rowData) => {
        var today = new Date();
        var birthDate = new Date(rowData.BirthDate);
        var age = today.getFullYear() - birthDate.getFullYear();
        var m = today.getMonth() - birthDate.getMonth();
        if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }
        return age;
    }

    const birthDate = (rowData) => {
        return toDateString(rowData.BirthDate);
    };

    const rowExpansionTemplate = (data) => {
        var arraydata = [];
        arraydata.push(data)
        return (
            <div className="p-3">
                <h5>{data.name + " " + data.surname}</h5>
                <DataTable value={arraydata} responsiveLayout="scroll">
                    <Column field="representative.name" body={representativesItemTemplatePicture} headerStyle={{ width: "1em", textAlign: "center" }} />
                    {/* <Column field="Gender" header={t('person.Gender')} headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} /> */}
                    <Column field="BirthDate" header={t('person.BirthDay')} headerStyle={{ width: "8em", textAlign: "center" }} style={{ textAlign: "center" }} body={birthDate} />
                    {/* <Column field="Age" header={t('person.Age')} headerStyle={{ width: "8em", textAlign: "center" }} style={{ textAlign: "center" }} body={FilterPersonAge} /> */}
                    <Column field="Organization" filterElement={organizationFilter} header={t("person.Unit")} sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="UpperOrganization" filterElement={upperOrganizationFilter} header={t("organizationlist.company")} sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="Location" header= {t('person.Location')} headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="EmergencyContactNumber" header={t('person.EmergencyContactNumber')} headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                </DataTable>
            </div>
        );
    }

    const onSelectionChange = (e) => {
        if (e.value.length == 0) {
            setMailButtonDisabled(true)
        }
        else {
            setMailButtonDisabled(false)
        }
        setSelectedRow(e.value)
    }


    return (
        <div className="card" style={{ height: '600px' }}>
            <div className="chart-title">
                <span style={{ textAlign: 'left' }}>{t("home.rightDescription")} </span>
            </div>

            <div style={{ float: "right" }}>
                <Button
                    type="button"
                    icon="pi pi-file-excel"
                    style={{ marginRight: "0.5em" }}
                    onClick={exportExcel}
                    className="p-button-success p-mr-2"
                    tooltip={t("isg.excel")}
                />

                <Button
                    label={t('isg.clear')}
                    icon="pi pi-trash"
                    className="p-button-danger p-button-outlined p-mr-2"
                    style={{ width: "8em"}}
                    onClick={() => {
                        setFilters(initialFilters)
                    }}
                />

                {/* <Button
                    label={t("person.sendEmail")}
                    style={{ width: "11em"}}
                    icon="pi pi-send"
                    iconPos="right"
                    disabled={mailButtonDisabled}
                    onClick={mailGonder}
                />   */}
                
            </div>
            <ScrollPanel style={{ width: '101%', height: '500px' }} className="custom">
                <DataTable value={filterResult}
                    size="small" rowExpansionTemplate={rowExpansionTemplate}
                    expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
                    selectionMode="multiple"
                    selection={selectedRow}
                    onSelectionChange={e => onSelectionChange(e)}
                    rowData
                    sortOrder="1"
                    emptyMessage={t("General.datanotfound")}
                    responsive={true}>
                    <Column expander={true} style={{ width: '1em' }} />    
                    <Column selectionMode="multiple" headerStyle={{ width: '1em' }}></Column>
                    {/* <Column field="representative.name" body={representativesItemTemplatePicture}
                        headerStyle={{ width: "1em", textAlign: "center" }} /> */}
                    <Column field="FullName" header={t('person.FullName')} body={representativesItemTemplate}
                        sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} filter filterElement={personFilter} filterPlaceholder={t('actions.search')} />
                    <Column field="Position" filter filterElement={positionFilter} filterPlaceholder={t("person.position")} header={t("person.position")} headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="Title" filter filterElement={titleFilter} filterPlaceholder={t("title.title")} header={t("title.title")} headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    {/* <Column field="Organization" filter filterElement={organizationFilter} header={t("person.Unit")} sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="UpperOrganization" filter filterElement={upperOrganizationFilter} header={t("organizationlist.company")} sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} /> */}
                    <Column field="FirstManager" header={t("person.firstmanager")} sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="SecondManager" header={t("person.secondmanager")} sortable headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="Age" header={t('person.Age')} filter headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} body={FilterPersonAge}/>
                    <Column field="Gender" header={t('person.Gender')} headerStyle={{ width: "5em", textAlign: "center" }} style={{ textAlign: "center" }} />
                    <Column field="NumberOfDaysSubjestToRight" header={t("person.Limak")} sortable headerStyle={{ width: "5em", textAlign: "center" }} filter filterPlaceholder={t('actions.search')} style={{ textAlign: "center" }} />
                    <Column field="BalanceRight" header={t("right.CurrentLeaveBalance")} sortable headerStyle={{ width: "5em", textAlign: "center" }} filter filterPlaceholder={t('actions.search')} style={{ textAlign: "center" }} />
                    {/* <Column field="Email" header={t('person.Email')} style={{width: "3em",overflow: "hidden"}} filter filterPlaceholder={t('actions.search')} filterMatchMode="contains"/>  */}

                </DataTable>

            </ScrollPanel>
        </div>);
}

export default OrganizationRightStatusDashboard;