/* eslint-disable @next/next/no-img-element */
'use client';
import Container from '@/components/common/Container';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, Collapse, Grid, Stack, Typography, css, styled } from '@mui/material';
import React, { useEffect, useState } from 'react';

const StyledBox = styled(Box)`
    padding: 90px 0;
    background-image: url('/static/images/faq-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;

    &:after {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #07275ccc;

        content: '';
    }

    .faq-container {
        position: relative;
        z-index: 3;
    }

    .faq-title {
        color: #fff;
        text-align: center;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px; /* 111.111% */

        margin-bottom: 16px;
    }

    .faq-subtitle {
        color: #fff;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        max-width: 484px;
        margin: 0 auto 46px;
    }

    .faq-card-inner {
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.06);
        padding: 37px 24px 42px;
    }

    .faq-card-title {
        color: #1f6bbd;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        margin-bottom: 12px;
    }
    .faq-card-text {
        color: #33517d;
        text-align: center;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
        max-width: 276px;
        margin: 0 auto;
    }
    .faq-card-img {
        width: 116px;
        height: 116px;
        display: block;
        margin: 0 auto;
        margin-bottom: 25px;
    }

    .questions-wrapper {
    }

    .question-item {
        padding: 20px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.06);
    }

    .question-title {
        color: #1f6bbd;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
    }

    .question-text {
        color: #33517d;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    .question-btn {
        background-color: transparent;
        border: 0;
        padding: 0;
        transition: transform 0.15s ease;
        svg {
            width: 20px;
            height: 20px;
        }
    }

    ${({ theme }) => css`
        ${theme.breakpoints.down('md')} {
            padding: 40px 0;

            .faq-title {
                font-size: 24px;
                line-height: normal;
                margin-bottom: 10px;
            }
        }
    `}
`;

type Props = {};

const FaqSection = (props: Props) => {
    const t = useMyTranslation();

    const [questions] = useState([
        {
            question: 'faq.faq1.question',
            answer: 'faq.faq1.answer',
        },
        {
            question: 'faq.faq1.question',
            answer: 'faq.faq1.answer',
        },
        {
            question: 'faq.faq1.question',
            answer: 'faq.faq1.answer',
        },
        {
            question: 'faq.faq1.question',
            answer: 'faq.faq1.answer',
        },
        {
            question: 'faq.faq1.question',
            answer: 'faq.faq1.answer',
        },
    ]);

    return (
        <StyledBox>
            <Container className='faq-container'>
                <Typography className='faq-title' data-aos='fade-up'>
                    {t('faq.title')}
                </Typography>
                <Typography className='faq-subtitle' data-aos='fade-up'>
                    {t('faq.subtitle')}
                </Typography>

                <Grid container spacing={'28px'}>
                    <Grid item xs={12} md={6}>
                        <Stack spacing={'28px'} className='questions-wrapper'>
                            {questions.map((question, index) => {
                                return <QuestionItem item={question} key={index} />;
                            })}
                        </Stack>
                    </Grid>
                    <Grid item xs={12} md={6}>
                        <Stack spacing={'28px'} className='questions-wrapper'>
                            {questions.map((question, index) => {
                                return <QuestionItem item={question} key={index} />;
                            })}
                        </Stack>
                    </Grid>
                </Grid>
            </Container>
        </StyledBox>
    );
};

const QuestionItem = ({ item }: { item: { question: string; answer: string } }) => {
    const t = useMyTranslation();
    const [expanded, setExpanded] = React.useState(false);

    const handleExpandClick = () => {
        setExpanded(!expanded);
    };

    return (
        <Box className='question-item' data-aos='fade-up'>
            <Stack direction={'row'} onClick={handleExpandClick} justifyContent={'space-between'} sx={{ cursor: 'pointer' }}>
                <Typography className='question-title'>{t(item.question)}</Typography>
                <button
                    onClick={handleExpandClick}
                    aria-expanded={expanded}
                    aria-label='show more'
                    className='question-btn'
                    style={{
                        transform: expanded ? 'rotate(180deg)' : '',
                    }}
                >
                    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'>
                        <path
                            d='M9.31212 10.4545L13.6432 6L14.8806 7.27272L9.31212 13L3.74365 7.27272L4.9811 6L9.31212 10.4545Z'
                            fill='#1F6BBD'
                        />
                    </svg>
                </button>
            </Stack>
            <Collapse in={expanded} timeout='auto' unmountOnExit>
                <Typography className='question-text'>{t(item.answer)}</Typography>
            </Collapse>
        </Box>
    );
};

export default FaqSection;
