'use client';

import BaseModal from '@/components/ui-kit/BaseModal';
import { Order } from '@/data/order/order.model';
import { PartyStatus } from '@/data/party/party.model';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { getBoxStatusStyles } from '@/theme/getStatusBoxStyles';
import { Box, Grid, Modal, Stack, SvgIcon, Typography, styled } from '@mui/material';
import React from 'react';

const StyledBox = styled(Box)`
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .checkboxes-grid-label {
        border-radius: 8px;
        background: #fff;
        flex-shrink: 0;
        border: 1px solid #b2b2b2;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;

        width: 64px;
        height: 64px;

        img {
            width: 44px;
            height: 44px;
        }

        &:focus-within {
            border: 1px solid #2d97ff;
            box-shadow: 0 0 0 1px #2d97ff;
        }
    }

    .calc-title {
        color: #11579b;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px;
        margin-bottom: 8px;
        white-space: pre-wrap;
    }

    .calc-subtitle {
        color: #1e1e1e;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        margin-bottom: 24px;
    }

    .delivery_type_label {
        padding: 5px 16px;
        border-radius: 8px;
        border: 1px solid #709ac3;
        background: #fff;

        display: flex;
        align-items: center;
        gap: 4px;
        color: #3489e4;

        span {
            color: #3489e4;
            text-align: center;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 18px;
        }

        &:focus-within,
        &:has(input:checked) {
            border: 1px solid #2d97ff;
            box-shadow: 0 0 0 1px #2d97ff;
        }
    }

    .input-wrapper {
        display: flex;
        height: 48px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #11579b99;

        input {
            width: 100%;
            border: 0;
            padding: 8px 12px;
            outline: none;
            border-radius: 0 6px 6px 0;

            &:focus {
                outline: 0;
                box-shadow: 0 0 1px 1px inset #2d97ff;
            }
        }

        &__icon {
            border-right: 1px solid #11579b99;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 100%;
        }
    }

    .search-btn {
        width: 48px;
        height: 48px;
        padding: 7px;
        border-radius: 6px;
        border: 1.38px solid rgba(17, 87, 155, 0.2);
        background: #3487e1;
        color: #fff;
        cursor: pointer;
    }
`;

type Props = {
    order: Order;
};

const CheckOrderResultBox = ({ order }: Props) => {
    const t = useMyTranslation();

    const calcData = (event: any) => {
        event.preventDefault();
    };

    return (
        <StyledBox component={'form'} onSubmit={calcData}>
            <Typography variant='h5' fontWeight={600} marginRight={'auto'}>
                {t('product_name')}: {order.name}
            </Typography>
            <Grid container spacing={2} mb={2}>
                <Grid item xs={12} md={6}>
                    <Typography>{t('cargo_id')}</Typography>
                    <Box
                        sx={{
                            width: '100%',
                            border: '1px solid #D8D8D8',
                            padding: '12px',
                            borderRadius: '8px',
                        }}
                    >
                        {order.cargoId}
                    </Box>
                </Grid>
                <Grid item xs={12} md={6}>
                    <Typography>{t('party_name')}</Typography>
                    <Box
                        sx={{
                            width: '100%',
                            border: '1px solid #D8D8D8',
                            padding: '12px',
                            borderRadius: '8px',
                        }}
                    >
                        {order.partyName}
                    </Box>
                </Grid>
                <Grid item xs={12} md={6}>
                    <Typography>{t('track_id')}</Typography>
                    <Box
                        sx={{
                            width: '100%',
                            border: '1px solid #D8D8D8',
                            padding: '12px',
                            borderRadius: '8px',
                        }}
                    >
                        {order.trekId}
                    </Box>
                </Grid>
                <Grid item xs={12} md={6}>
                    <Typography>{t('quantity')}</Typography>
                    <Box
                        sx={{
                            width: '100%',
                            border: '1px solid #D8D8D8',
                            padding: '12px',
                            borderRadius: '8px',
                        }}
                    >
                        {order.amount}
                    </Box>
                </Grid>
                <Grid item xs={12} md={6}>
                    <Typography>{t('weight')}</Typography>
                    <Box
                        sx={{
                            width: '100%',
                            border: '1px solid #D8D8D8',
                            padding: '12px',
                            borderRadius: '8px',
                        }}
                    >
                        {order.weight}
                    </Box>
                </Grid>
            </Grid>

            <Stack spacing={1} alignSelf={'start'}>
                {order.dates.map(({ date, status }, index) => {
                    return (
                        <Stack direction={'row'} alignItems={'center'} spacing={2} key={status + index}>
                            <span>{date}</span>:<Typography sx={{ ...getBoxStatusStyles(status as PartyStatus) }}>{t(status)}</Typography>
                        </Stack>
                    );
                })}
            </Stack>
        </StyledBox>
    );
};

type CheckOrderModalProps = {
    open: boolean;
    onClose: () => void;
    result: Order;
};

const CheckOrderResultModal = ({ open, onClose, result }: CheckOrderModalProps) => {
    return (
        <BaseModal open={open} onClose={onClose} maxWidth='600px'>
            <CheckOrderResultBox order={result} />
        </BaseModal>
    );
};

export default CheckOrderResultBox;
export { CheckOrderResultModal };