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

import {Text} 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);
            })
    }
    return (
        <div onClick={() => onDealSummaryClick()} className={styles['container']}>
            <div className={styles['flex-row']}>
                <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>
                </div>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={"gray.6"}>
                        {dealSummary.totalPrice.toLocaleString('ru-RU')} руб
                    </Text>
                </div>
            </div>
            <div className={classNames(styles['flex-row'], styles['flex-row-right'])}>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={"gray.6"}>
                        {new Date(dealSummary.changedAt).toLocaleString('ru-RU')}
                    </Text>
                </div>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={"yellow.8"}>
                        Нет задач
                    </Text>
                </div>
            </div>

        </div>
    )
}
export default DealSummaryCard;
