import { CheckOrderResultModal } from '@/components/common/CheckOrderResultModal';
import Loader from '@/components/common/Loader';
import { useAuthContext } from '@/context/auth-context';
import { Order } from '@/data/order/order.model';
import { order_requests } from '@/data/order/order.requests';
import useInput from '@/hooks/useInput';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { notifyUnknownError } from '@/services/notification';
import { Box, CircularProgress, Grid, IconButton, Paper, Stack, SvgIcon, Typography, styled } from '@mui/material';
import React, { useState } from 'react';

type Props = {};

const StyledBox = styled(Box)`
    padding: 24px;
    background-color: #fff;
    border-radius: 16px;

    .title {
        color: #000;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: 0.96px;
        margin-bottom: 24px;
    }

    .right-block {
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 16px;
    }

    .right-label {
        color: #000;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: 0.72px;
    }

    .right-description {
        color: #5d5c5c;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.72px;
    }

    .check-form {
        border-radius: 12px;
        border: 2px solid #edf1f7;
        background: #fff;
        max-width: 600px;
        height: 56px;
        position: relative;

        input {
            border-radius: 12px;
            border: 0;
            height: 100%;
            width: 100%;
            &:focus {
                outline-offset: 1px;
                outline: 2px dashed #7fa6e7;
            }
        }
        button {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 56px;

            border-radius: 12px;
            background: #7fa6e7;
            border: 0;
            color: #fff;

            &:focus {
                outline-offset: 1px;
                outline: 2px dashed #7fa6e7;
            }
        }
    }
`;

const CheckOrderDashboard = (props: Props) => {
    const { user } = useAuthContext();
    const t = useMyTranslation();
    const orderNumInput = useInput('');
    const [loading, setLoading] = useState(false);
    const [open, setOpen] = useState(false);

    const [order, setOrder] = useState<Order | null>(null);

    const closeModal = () => setOpen(false);

    const onCheckSubmit = async (event: any) => {
        event?.preventDefault?.();

        if (loading || !orderNumInput.value.trim()) return;
        try {
            setLoading(true);

            const response = await order_requests.check({ trekId: orderNumInput.value });

            if (response.data.data[0]) {
                setOpen(true);
                setOrder(response.data.data[0]);
                orderNumInput.setValue('');
            } else {
                notifyUnknownError(t('search_available_in_trekid'));
            }
        } catch (error) {
            notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <StyledBox>
            <Grid container spacing={'55px'}>
                <Grid item xs={6}>
                    <Typography className='title' mb={1}>
                        {t('check_order')}
                    </Typography>
                    <Box component={'form'} className='check-form' onSubmit={onCheckSubmit}>
                        <input type='text' value={orderNumInput.value} onChange={orderNumInput.onChange} />
                        <IconButton disabled={loading} onClick={onCheckSubmit}>
                            <SvgIcon>
                                <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
                                    <path
                                        d='M24.0413 22.1557L29.7516 27.866L27.866 29.7516L22.1557 24.0413C20.1025 25.684 17.4987 26.6666 14.6667 26.6666C8.04266 26.6666 2.66666 21.2906 2.66666 14.6666C2.66666 8.04263 8.04266 2.66663 14.6667 2.66663C21.2907 2.66663 26.6667 8.04263 26.6667 14.6666C26.6667 17.4986 25.684 20.1025 24.0413 22.1557ZM21.3663 21.1664C22.9967 19.4861 24 17.1941 24 14.6666C24 9.50996 19.8233 5.33329 14.6667 5.33329C9.50999 5.33329 5.33332 9.50996 5.33332 14.6666C5.33332 19.8233 9.50999 24 14.6667 24C17.1941 24 19.4861 22.9966 21.1664 21.3662L21.3663 21.1664Z'
                                        fill='currentColor'
                                    />
                                </svg>
                            </SvgIcon>
                        </IconButton>
                    </Box>
                </Grid>
                <Grid item xs={6}>
                    <Stack spacing={1} className='right-block'>
                        <Stack direction={'row'} spacing={1}>
                            <Typography className='right-label'>Manzil:</Typography>
                            <Typography className='right-description'>{user?.address}</Typography>
                        </Stack>
                        <Stack direction={'row'} spacing={1}>
                            <Typography className='right-label'>Shaxs:</Typography>
                            <Typography className='right-description'>{user?.fullName}</Typography>
                        </Stack>
                        <Stack direction={'row'} spacing={1}>
                            <Typography className='right-label'>Telefon raqam:</Typography>
                            <Typography className='right-description'>{user?.phone}</Typography>
                        </Stack>
                    </Stack>
                </Grid>
            </Grid>
            {open && order && <CheckOrderResultModal onClose={closeModal} open result={order} />}
        </StyledBox>
    );
};

export default CheckOrderDashboard;
