import { Card, Col, Row } from "antd";
import './warehouse-dashboard.css';
import React, { useEffect } from "react";
import { CardBodyDetails, CardDetail, CardHeaderBody } from "@gtpl/shared-models/common-models";
import { WarehouseDashboardService } from "@gtpl/shared-services/analytics";
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

export interface LifeCyclCardProps {
    cardData: CardDetail
}

export const LifeCyclCard = (props: LifeCyclCardProps) => {
    const { cardData } = props;

    const constructLocationDetail = (bodyDetail: CardBodyDetails[]) => {
        console.log(bodyDetail);
        return bodyDetail.map(bodyProps =>
            <tr style={{ borderBottom: '1px solid #f0f8ff', lineHeight: ' 1.8em' }}>
                <td >{bodyProps.cardBodyTitle}</td>
                <td >{bodyProps.cardBodyParam1}</td>
                <td >{bodyProps.cardBodyParam2}</td>
                <td >{bodyProps.cardBodyParam3}</td>
                <td >{bodyProps.cardBodyParam4}</td>
            </tr>
        )
    }

    const constructTableHeader = (headers: string[]) => {
        return headers.map(head => <th style={{ borderBottom: '1px solid #ccc', lineHeight: ' 1.8em', marginBottom: '10px' }}>{head}</th>)
    }
    return (
        <>
            <Card className="whCard" title={<span style={{ marginBottom: '10px' }} className="title">{cardData.carHeader.cardHeaderTitle}</span>} bordered={false} style={{ color: 'white', height: '100%' }}>
                <Row style={{ width: '100%', height: '20px' }}>
                    <Col span={8}>
                        {cardData.carHeader.cardHederData[0].title}
                    </Col>
                    <Col span={14} offset={2}>
                        {cardData.carHeader.cardHederData[1].title}
                    </Col>
                </Row>
                <Row>
                    <Col span={8} style={{ fontSize: '30px' }}>
                        {cardData.carHeader.cardHederData[0].value}
                    </Col>
                    <Col span={14} offset={2} style={{ fontSize: '30px' }}>
                        {cardData.carHeader.cardHederData[1].value}
                    </Col>
                </Row>
                <table cellPadding="0" style={{ borderCollapse: 'collapse', width: '90%', margin: '1.5em', fontSize: '0.85em', border: '0' }}>
                    {constructTableHeader(cardData.tableHeaders)}
                    <tbody>
                        {constructLocationDetail(cardData.cardBody)}
                    </tbody>
                </table>
            </Card>
        </>
    );
}
export default LifeCyclCard;