'use client';

import CheckOrderResultBox from '@/components/common/CheckOrderResultModal/CheckOrderResultModal';
import BaseModal from '@/components/ui-kit/BaseModal';
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 { notifyError, notifyUnknownError } from '@/services/notification';
import { Box, CircularProgress, Grid, Modal, Stack, SvgIcon, Typography, styled } from '@mui/material';
import React, { useState } 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 = {};

const CheckOrder = (props: Props) => {
    const t = useMyTranslation();
    const inputValue = useInput('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(false);
    const [order, setOrder] = useState<Order | null>(null);

    const onSubmit = async (event: any) => {
        event.preventDefault();
        if (!inputValue.value.trim() || loading) return;

        try {
            setLoading(true);
            setError(false);

            const response = await order_requests.check({ trekId: inputValue.value });
            if (response.data.data[0]) {
                setOrder(response.data.data[0]);
                // inputValue.setValue('');
            } else {
                setOrder(null);
                setError(true);
            }
        } catch (error) {
            setError(true);
            // notifyUnknownError(error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <StyledBox component={'form'} onSubmit={onSubmit}>
            <Typography className='calc-title'>{t('check_order_obj.title')}</Typography>
            <Typography className='calc-subtitle'>{t('check_order_obj.subtitle')}</Typography>

            <Stack direction={'row'} spacing={1} mb={3}>
                <Box className='input-wrapper'>
                    <Box className='input-wrapper__icon'>
                        <svg xmlns='http://www.w3.org/2000/svg' width='25' height='24' viewBox='0 0 25 24' fill='none'>
                            <path
                                d='M2.19727 4H4.19727V20H2.19727V4ZM6.19727 4H7.19727V20H6.19727V4ZM8.19727 4H10.1973V20H8.19727V4ZM11.1973 4H13.1973V20H11.1973V4ZM14.1973 4H16.1973V20H14.1973V4ZM17.1973 4H18.1973V20H17.1973V4ZM19.1973 4H22.1973V20H19.1973V4Z'
                                fill='black'
                            />
                        </svg>
                    </Box>
                    <input
                        type='text'
                        value={inputValue.value}
                        onChange={inputValue.onChange}
                        placeholder={t('check_order_obj.enter_check_code')}
                    />
                </Box>
                <button className='search-btn' disabled={loading}>
                    <svg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'>
                        <path
                            d='M13.5779 12.4626L16.79 15.6746L15.7293 16.7353L12.5173 13.5233C11.3624 14.4473 9.89769 15 8.30469 15C4.57869 15 1.55469 11.976 1.55469 8.25C1.55469 4.524 4.57869 1.5 8.30469 1.5C12.0307 1.5 15.0547 4.524 15.0547 8.25C15.0547 9.843 14.5019 11.3077 13.5779 12.4626ZM12.0732 11.9061C12.9903 10.9609 13.5547 9.6717 13.5547 8.25C13.5547 5.34938 11.2053 3 8.30469 3C5.40406 3 3.05469 5.34938 3.05469 8.25C3.05469 11.1506 5.40406 13.5 8.30469 13.5C9.72639 13.5 11.0156 12.9356 11.9608 12.0185L12.0732 11.9061Z'
                            fill='white'
                        />
                    </svg>
                </button>
            </Stack>

            {/* <Typography className='calc-subtitle'>{t('check_order_obj.select_delivery_type')}</Typography> */}
            <Stack direction={'row'} spacing={1} display={'none'}>
                <label className='delivery_type_label'>
                    <SvgIcon>
                        <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'>
                            <path
                                d='M11.9 2.8353C12.5948 2.27391 13.373 2.23983 14.2233 2.25175C14.6631 2.25791 14.883 2.261 15.0594 2.32941C15.3393 2.43795 15.5621 2.66073 15.6706 2.94061C15.739 3.11701 15.7421 3.3369 15.7483 3.77668C15.7602 4.62695 15.7261 5.40515 15.1647 6.09995C14.692 6.68503 13.8794 6.99076 13.4885 7.63658C13.19 8.12963 13.329 8.64023 13.4573 9.16568L14.4171 13.0997C14.6084 13.8836 14.4629 14.3861 13.9147 14.9343C13.623 15.226 13.3804 15.2112 13.1438 14.8343L10.247 10.2187L8.86358 11.3183C8.36198 11.7171 8.11118 11.9165 7.9794 12.197C7.6707 12.8541 7.86668 13.841 7.87665 14.5535C7.8822 14.9472 7.54193 15.7233 7.06043 15.7495C6.76317 15.7657 6.66212 15.4101 6.56611 15.1919L5.64176 13.0908C5.4207 12.5884 5.41164 12.5793 4.90917 12.3583L2.80811 11.4339C2.58989 11.3379 2.23436 11.2368 2.25053 10.9396C2.27674 10.4581 3.05277 10.1178 3.44652 10.1234C4.15899 10.1333 5.14592 10.3293 5.80301 10.0206C6.08357 9.88883 6.28293 9.63803 6.68166 9.13643L7.78133 7.75298L3.16577 4.85617C2.78884 4.6196 2.77404 4.37698 3.06566 4.08536C3.61388 3.53715 4.11638 3.39161 4.90033 3.58289L8.83433 4.54277C9.35978 4.67099 9.87038 4.81007 10.3634 4.51155C11.0093 4.12058 11.315 3.30806 11.9 2.8353Z'
                                stroke='currentColor'
                                stroke-width='1.5'
                                stroke-linecap='round'
                                stroke-linejoin='round'
                            />
                        </svg>
                    </SvgIcon>
                    <span>{t('check_order_obj.delivery_type_avia')}</span>
                    <input className='visually-hidden' type='radio' name='deliveryType' value={'avia'} />
                </label>
                <label className='delivery_type_label'>
                    <SvgIcon>
                        <svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'>
                            <path
                                d='M14.625 13.125C14.625 14.1605 13.7855 15 12.75 15C11.7145 15 10.875 14.1605 10.875 13.125C10.875 12.0895 11.7145 11.25 12.75 11.25C13.7855 11.25 14.625 12.0895 14.625 13.125Z'
                                stroke='currentColor'
                                stroke-width='1.5'
                            />
                            <path
                                d='M7.125 13.125C7.125 14.1605 6.28553 15 5.25 15C4.21447 15 3.375 14.1605 3.375 13.125C3.375 12.0895 4.21447 11.25 5.25 11.25C6.28553 11.25 7.125 12.0895 7.125 13.125Z'
                                stroke='currentColor'
                                stroke-width='1.5'
                            />
                            <path
                                d='M10.875 13.125H7.125M14.625 13.125H15.1974C15.3623 13.125 15.4448 13.125 15.5141 13.1164C16.0252 13.0527 16.4277 12.6502 16.4914 12.1391C16.5 12.0698 16.5 11.9873 16.5 11.8224V9.75C16.5 7.05761 14.3174 4.875 11.625 4.875M1.5 3H9C10.0606 3 10.591 3 10.9205 3.32951C11.25 3.65901 11.25 4.18934 11.25 5.25V11.625M1.5 9.5625V11.25C1.5 11.9509 1.5 12.3014 1.65072 12.5625C1.74946 12.7335 1.89148 12.8755 2.0625 12.9742C2.32356 13.125 2.67403 13.125 3.375 13.125'
                                stroke='currentColor'
                                stroke-width='1.5'
                                stroke-linecap='round'
                                stroke-linejoin='round'
                            />
                            <path
                                d='M1.5 5.25H6M1.5 7.5H4.5'
                                stroke='currentColor'
                                stroke-width='1.5'
                                stroke-linecap='round'
                                stroke-linejoin='round'
                            />
                        </svg>
                    </SvgIcon>
                    <span>{t('check_order_obj.delivery_type_car')}</span>
                    <input className='visually-hidden' type='radio' name='deliveryType' value={'car'} />
                </label>
            </Stack>

            {loading ? <CircularProgress /> : error ? <Box>{t('not_found')}</Box> : order ? <CheckOrderResultBox order={order} /> : ''}
        </StyledBox>
    );
};

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

const CheckOrderModal = ({ open, onClose }: CheckOrderModalProps) => {
    return (
        <BaseModal open={open} onClose={onClose} maxWidth='400px'>
            <CheckOrder />
        </BaseModal>
    );
};

export default CheckOrder;
export { CheckOrderModal };
