'use client';

import ToggleButton, { ToggleButtonClassNames } from '@/components/button/ToggleButton';
import TabContainer, { TabContainerClassNames, TabContainerRenderType } from '@/components/tab/TabContainer';
import { TabHeader } from '@/components/tab/TabHeader';
import { Button } from '@/components/ui/button';
import RateSelectionBar from '@/components/utils/RateSelectionBar';
import clsx from 'clsx';
import { useParams, useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useCreateRate } from '../hooks/useRateData';
import { CreateRateType } from '../types/Types';
import { toast } from '@/components/Toast';
import { PositivePointEnum, NegativePointEnum } from '../enum/Enum';
import { extractErrorMessage } from '@/lib/func';

type Props = object

type Params = {
    orderId: string;
}

function RatingOrderIndex({ }: Props) {

    const { t } = useTranslation("rating");
    const params: Params = useParams();
    const router = useRouter();
    const urlParams = new URLSearchParams(window.location.search);
    const { mutate: createRate, isPending } = useCreateRate();

    const [rating, setRating] = useState<number>(5);
    const [comment, setComment] = useState<string>('');
    const [positivePoints, setPositivePoints] = useState<string[]>([]);
    const [negativePoints, setNegativePoints] = useState<string[]>([]);

    const positivePointsArray = [
        PositivePointEnum.GREAT_TASTE,
        PositivePointEnum.FAST_DELIVERY,
        PositivePointEnum.GOOD_QUALITY,
        PositivePointEnum.GOOD_PORTION_SIZE,
        PositivePointEnum.FRIENDLY_SERVICE,
    ];

    const negativePointsArray = [
        NegativePointEnum.SMALL_PORTION,
        NegativePointEnum.SLOW_DELIVERY,
        NegativePointEnum.POOR_QUALITY,
        NegativePointEnum.OVERPRICED,
        NegativePointEnum.UNFRIENDLY_SERVICE,
    ];

    const getTranslationKey = (point: string, isPositive: boolean): string => {
        const basePath = isPositive ? 'Tabs.Strengths.Options' : 'Tabs.Weeknesses.Options';
        return `${basePath}.${point}`;
    };

    const handleToggle = (pointValue: string, isPositive: boolean) => (checked: boolean) => {
        const setter = isPositive ? setPositivePoints : setNegativePoints;

        if (checked) {
            setter(prev => [...prev, pointValue]);
        } else {
            setter(prev => prev.filter(p => p !== pointValue));
        }
    };

    const badPoitns = () => {
        return (
            <>
                <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
                    {negativePointsArray.map((point) => (
                        <ToggleButton
                            className={{
                                ...ToggleButtonClassNames,
                                wrapperActive: 'border-red-400',
                                contentActive: 'text-red-400'
                            }}
                            key={point}
                            name={`weekness_${point}`}
                            // @ts-expect-error - Type mismatch between custom ToggleButton and React types
                            onToggle={handleToggle(point, false)}
                        >
                            {t(getTranslationKey(point, false))}
                        </ToggleButton>
                    ))}
                </div>
            </>
        )
    }

    const goodPoitns = () => {
        return (
            <>
                <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
                    {positivePointsArray.map((point) => (
                        <ToggleButton
                            key={point}
                            name={`strength_${point}`}
                            // @ts-expect-error - Type mismatch between custom ToggleButton and React types
                            onToggle={handleToggle(point, true)}
                        >
                            {t(getTranslationKey(point, true))}
                        </ToggleButton>
                    ))}
                </div>
            </>
        )
    }

    const handleRatingChange = (value: number[]) => {
        setRating(value[0]);
    };

    const handleCancel = () => {
        router.back();
    };

    const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        if (rating === 0) {
            toast(t("Errors.RatingRequired") || "لطفا امتیاز خود را انتخاب کنید", "error");
            return;
        }

        const rateData: CreateRateType = {
            foodId: urlParams.get('foodId') || '',
            orderId: params.orderId,
            rating,
            comment,
            positivePoints,
            negativePoints,
        };

        createRate(rateData, {
            onSuccess: () => {
                toast(t("Success") || "نظر شما با موفقیت ثبت شد", "success");
                router.back();
            },
            onError: (error) => {
                toast(extractErrorMessage(error), "error");
            },
        });
    };

    return (
        <section className='flex flex-col h-full pt-6'>
            <h1 className='font-medium'>{t("Heading")}</h1>

            <form onSubmit={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>

                <div>
                    <div className='w-full'>
                        <RateSelectionBar
                            name='rating'
                            defaultValue={[rating]}
                            onValueChange={handleRatingChange}
                        />
                    </div>

                    <div className='mt-10'>
                        <TabContainer
                            defaultIndex={1}
                            changeType={TabContainerRenderType.VISIBILITY}
                            className={{
                                ...TabContainerClassNames,
                                wrapper: 'p-2!',
                                scrollView: clsx(
                                    'border-none! rounded-xl! gap-0! h-full bg-[#EAECF0]! dark:bg-neutral-900! not-dark:gradient-border! grid! grid-cols-2 px-2! py-2! pb-2! w-full overflow-y-hidden justify-center items-center',
                                ),
                                title: 'text-sm2! font-normal mt-1',
                                header: 'rounded-lg h-7! w-full',
                                headerActive: 'bg-white',
                                titleActive: 'text-primary'
                            }}>
                            <TabHeader title={t("Tabs.Weeknesses.Title")} viewRenderer={badPoitns()}></TabHeader>
                            <TabHeader title={t("Tabs.Strengths.Title")} viewRenderer={goodPoitns()}></TabHeader>
                        </TabContainer>
                        <div className="w-full mt-6">
                            <label htmlFor='userOpinion' className='text-sm font-medium'>
                                {t("InputComment.Label")}
                            </label>
                            <br />
                            <textarea
                                name='userOpinion'
                                id='userOpinion'
                                value={comment}
                                onChange={(e) => setComment(e.target.value)}
                                placeholder={t("InputComment.Placeholder")}
                                className='dark:border-neutral-600 dark:bg-neutral-800 mt-2 w-full h-21 px-4 py-2.5 text-xs text-foreground rounded-xl border border-[#D0D0D0] focus:outline-none focus:ring-2 focus:ring-accent'
                            />
                            <br />
                        </div>
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-4 mt-6">
                    <Button
                        type='submit'
                        disabled={isPending}
                        className='mt-auto rounded-xl font-normal cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed'
                    >
                        {isPending ? t("ButtonSubmitting") || "در حال ارسال..." : t("ButtonSubmit")}
                    </Button>
                    <Button
                        type='button'
                        onClick={handleCancel}
                        disabled={isPending}
                        className='
                            mt-auto rounded-xl bg-white dark:bg-container cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-700
                            border border-foreground dark:border-neutral-600 text-foreground font-normal disabled:opacity-50 disabled:cursor-not-allowed'
                    >
                        {t("ButtonCancel")}
                    </Button>
                </div>


            </form>
        </section>
    )
}

export default RatingOrderIndex