import {FC} from "react";
import {DealService, DealSummary} from "../../../client";
import styles from './DealSummaryCard.module.css';

import {ActionIcon, Text, Image} from '@mantine/core';
import classNames from "classnames";
import {useDealPageContext} from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";

type Props = {
    dealSummary: DealSummary
}

const DealSummaryCard: FC<Props> = ({dealSummary}) => {
    const {setSelectedDeal} = useDealPageContext();
    const onDealSummaryClick = () => {
        DealService.getDealById({dealId: dealSummary.id})
            .then((deal) => {
                setSelectedDeal(deal);
            })
    }
    const getDeadlineTextColor = (deadline: string) => {
        // generate three colors, yellow for 1 day, red for 0 days, green for more than 1 day
        const deadlineDate = new Date(deadline);
        const currentDate = new Date();
        const diff = deadlineDate.getTime() - currentDate.getTime();
        const diffDays = Math.ceil(diff / (1000 * 3600 * 24));
        if (diffDays < 0)
            return 'red.8'; // for past deadlines
        if (diffDays === 1) {
            return 'yellow.8';
        }
        if (diffDays === 0) {
            return 'orange.8';
        }
        return 'green.8';
    }
    return (
        <div onClick={() => onDealSummaryClick()} className={styles['container']}>
            <div className={classNames(styles['flex-row'], styles["flex-row-left"])}>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={"gray.6"}>
                        Клиент: {dealSummary.clientName}
                    </Text>
                </div>
                <div className={styles['flex-item']}>
                    <Text size={"md"} c={"blue.5"}>{dealSummary.name}</Text>
                    {dealSummary.shipmentWarehouseName &&
                        <Text size={"sm"} c={"gray.6"}>{dealSummary.shipmentWarehouseName}</Text>
                    }
                </div>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={"gray.6"}>
                        {dealSummary.totalPrice.toLocaleString('ru-RU')} руб, {dealSummary.totalProducts.toLocaleString("ru-RU")} тов.
                    </Text>
                </div>
            </div>
            <div className={classNames(styles['flex-row'], styles['flex-row-right'])}>
                <div className={styles['flex-item']}>
                    <ActionIcon  variant={"transparent"}>
                        <Image src={dealSummary.baseMarketplace?.iconUrl || ""}/>
                    </ActionIcon>
                </div>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={getDeadlineTextColor(dealSummary.deadline)}>
                        {new Date(dealSummary.deadline).toLocaleString('ru-RU').slice(0, -3)}
                    </Text>
                </div>
            </div>

        </div>
    )
}
export default DealSummaryCard;
