import React, { useState, useEffect } from 'react';
import { Button, Tooltip, Input, Descriptions, Collapse } from 'antd';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { PlantZone } from '@gtpl/shared-models/warehouse-management';
import { StockInService } from '@gtpl/shared-services/warehouse-management';
const { Search } = Input;
const { Panel } = Collapse;

export interface ZoneDisplayProps {
    plantId: number;
    zoneId: number;
}

export function ZoneDisplay(props: ZoneDisplayProps) {    
    const [racks,setRacks] = useState([]);    
    const [searchString,setSearchString] = useState('');
    const stockInService = new StockInService();
    useEffect(() => {
        getZoneLevelRacks();
    }, []);

    const addClassName = (value:string) => {
        if(value === searchString){
            return 'blink';
        } else {
            return '';
        }
    }

    const displayTooltip = (props:any,rackName:string) => {
        return (
            <>
                <Descriptions layout="vertical" size="small" contentStyle={{backgroundColor:"white", padding:'3px'}}>
                    <Descriptions.Item>
                        <strong>
                            Rack Name:&nbsp;&nbsp;{rackName}<br/>
                            PO Number:&nbsp;&nbsp;{props.poNumber}<br/>
                            Brand Name:&nbsp;&nbsp;{props.brandName}<br/>
                            Grade:&nbsp;&nbsp;{props.grade}<br/>
                            Product Name:&nbsp;&nbsp;{props.productName}<br/>
                            Variant Code:&nbsp;&nbsp;{props.variantCode}<br/>
                            Pallet Code:&nbsp;&nbsp;{props.palletCode}<br/>
                            Packing Completed:&nbsp;&nbsp;{props.packingCompleted}<br/>
                            Stock State:&nbsp;&nbsp;{props.stockState}<br/>
                            Stock Type:&nbsp;&nbsp;{props.stockType}
                        </strong>                    
                    </Descriptions.Item>
                </Descriptions>
            </>
        )
    }

    const eachCellDisplay = (props:any,cellBreakFlag:boolean,rackBreakFlag:boolean,rackName:string) => {
        return (
          <>
          <span key={Date.now()}>
            {(cellBreakFlag)? <br/>:''}
            <Tooltip title={displayTooltip(props,rackName)}>
              <Button size="small" type="primary" danger={(props.occupancy === 'Assigned') ? true:false} className={addClassName(props.poNumber)} style={{border: '2px solid #dbdbdb', width:'5.8%'}}>
                {props.rackCode}
              </Button>
            </Tooltip>
            {(rackBreakFlag)? <br/>:''}
          </span>
          </>
        )
    }
      
    const eachRackDisplay = (racks:any) => {
        return (racks.map((rack:any,index:number) => {
          let rackPosCnt = 0;
          let rackCellCount = 0;
          return(
              <Panel header={'Rack - '+rack.rackName} key={index} showArrow={false} style={{textAlign:'center',fontWeight:'bold'}}>
                {
                  rack.rackPositions.map((cell:any) => {
                    let flag = false;
                    rackCellCount++;
                    if(rackCellCount===34){
                        flag = true;
                        rackCellCount = 0;
                    }
                    if(rackPosCnt===17){
                        rackPosCnt = 1;
                        return eachCellDisplay(cell,true,flag,rack.rackName);
                    } else {
                        rackPosCnt++;
                        return eachCellDisplay(cell,false,flag,rack.rackName);
                    }
                  })
                }
              </Panel>
            );     
          })
        )
    }

    const getZoneLevelRacks = () => {
        stockInService.getWarehouseView(new PlantZone(props.plantId,props.zoneId)).then((res) => {
          if (res.status) {
            setRacks(res.data);
          } else {
            if (res) {
              AlertMessages.getErrorMessage(res.internalMessage);
            } else {
              AlertMessages.getErrorMessage(res.internalMessage);
            }
          }
        })
        .catch((err) => {
          AlertMessages.getErrorMessage(err.message);
        });
    }

    
    const onSearch = (value:string) => {
        setSearchString(value);
    } 

    return (
        <>
            <Button type="primary" danger> Occupied</Button>  &nbsp;&nbsp;&nbsp;
            <Button type="primary">Not Occupied</Button>
            <Search placeholder="Search Sale Order" onSearch={onSearch} allowClear enterButton style={{ width: 300,float: "right" }}/><br/><br/>
            <Collapse defaultActiveKey={[0]} accordion>
              {eachRackDisplay(racks)}
            </Collapse>
        </>
    )
}

export default ZoneDisplay;