'use client';

import BaseModal from '@/components/ui-kit/BaseModal';
import useInput from '@/hooks/useInput';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, Grid, Modal, Stack, 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-wrapper {
        max-width: 300px;
        display: flex;
        justify-content: center;
    }

    .checkboxes-grid {
        margin-bottom: 24px;
    }

    .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;
        cursor: pointer;

        width: 64px;
        height: 64px;

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

        &:focus-within,
        &:has(input:checked) {
            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;
    }

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

    .calc-input {
        border-radius: 5.352px;
        border: 1.338px solid rgba(17, 87, 155, 0.6);
        background: #fff;
        padding: 8px 10px;

        width: 100%;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 16.056px;
        color: #222;

        &::placeholder {
            color: #bababa;
        }

        &--btn {
            background-color: #3489e4;
            border: 0;
            color: #fff;
            cursor: pointer;

            &:hover {
                opacity: 0.8;
            }
            &:active {
                opacity: 0.6;
            }
        }
    }

    .price-value {
        color: #1f1f1f;
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 26.76px;
    }
`;

type Props = {};

const Calculator = (props: Props) => {
    const t = useMyTranslation();
    const inputValue = useInput('');
    const serviceInput = useInput('avia');

    let result: string | number = 0;

    if (serviceInput.value === 'avia' && !Number.isNaN(Number(inputValue.value))) {
        result = (Number(inputValue.value) * 12).toFixed(2);
    }

    if (serviceInput.value === 'truck' && !Number.isNaN(Number(inputValue.value))) {
        result = (Number(inputValue.value) * 9).toFixed(2);
    }

    return (
        <StyledBox>
            <Typography className='calc-title' id='modal-modal-title'>
                {t('calc_obj.title')}
            </Typography>
            <Typography className='calc-subtitle' id='modal-modal-description'>
                {t('calc_obj.subtitle')}
            </Typography>

            <Box className='checkboxes-grid-wrapper'>
                <Grid container className='checkboxes-grid' justifyContent={'space-between'} spacing={'30px'}>
                    <Grid item xs={4} md={4}>
                        <label className='checkboxes-grid-label'>
                            <img src='/static/images/service1.png' alt='' />
                            <input
                                className='visually-hidden'
                                type='radio'
                                checked={serviceInput.value === 'avia'}
                                onChange={serviceInput.onChange}
                                name='serviceType'
                                value={'avia'}
                            />
                        </label>
                    </Grid>
                    <Grid item xs={4} md={4}>
                        <label className='checkboxes-grid-label'>
                            <img src='/static/images/service2.png' alt='' />
                            <input
                                className='visually-hidden'
                                type='radio'
                                checked={serviceInput.value === 'truck'}
                                onChange={serviceInput.onChange}
                                name='serviceType'
                                value={'truck'}
                            />
                        </label>
                    </Grid>
                    {/* <Grid item xs={4} md={4}>
                        <label className='checkboxes-grid-label'>
                            <img src='/static/images/service3.png' alt='' />
                            <input className='visually-hidden' type='radio' name='serviceType' value={'service3'} />
                        </label>
                    </Grid> */}
                </Grid>
            </Box>

            <Grid container spacing={1.5} mb={3}>
                {/* <Grid item xs={12} md={6}>
                    <input type='number' placeholder={t('calc_obj.colvo_sht')} className='calc-input' />
                </Grid>
                <Grid item xs={12} md={6}>
                    <input type='number' placeholder={t('calc_obj.volume')} className='calc-input' />
                </Grid> */}
                <Grid item xs={12} md={12}>
                    <input
                        value={inputValue.value}
                        onChange={inputValue.onChange}
                        type='number'
                        placeholder={t('calc_obj.weight_of_product')}
                        className='calc-input'
                    />
                </Grid>
                {/* <Grid item xs={12} md={6}>
                    <input type='submit' value={t('calc_obj.calc_value')} className='calc-input calc-input--btn' />
                </Grid> */}
            </Grid>

            <Stack direction={'row'} justifyContent={'center'} alignItems={'center'}>
                <Typography className='price-value'>
                    {t('price')} = {result}$
                </Typography>
            </Stack>
        </StyledBox>
    );
};

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

const CalculatorModal = ({ open, onClose }: CalculatorModalProps) => {
    return (
        <BaseModal maxWidth='400px' onClose={onClose} open={open}>
            <Calculator />
        </BaseModal>
    );
};

export default Calculator;
export { CalculatorModal };
