'use client';

import ToggleButton 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 } from 'next/navigation';
import React from 'react'
import { useTranslation } from 'react-i18next';

type Props = object

type Params = {
    orderId: string;
}

function RatingOrderIndex({ }: Props) {
    const params: Params = useParams();
    console.log(params);
    const { t } = useTranslation("rating");

    const badPoitns = () => {
        return (
            <>
                <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
                    {[...Array(6)].map((_, i) => (
                        <ToggleButton key={i} name={`weekness${i}`}>
                            {t(`Tabs.Weeknesses.Options.${i}`)}
                        </ToggleButton>
                    ))}
                </div>
            </>
        )
    }

    const goodPoitns = () => {
        return (
            <>
                <div className="grid grid-cols-2 gap-x-4.5 gap-y-4 mt-8">
                    {[...Array(6)].map((_, i) => (
                        <ToggleButton key={i} name={`strength${i}`}>
                            {t(`Tabs.Strengths.Options.${i}`)}
                        </ToggleButton>
                    ))}
                </div>
            </>
        )
    }

    const submitForm = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const formData = new FormData(e.currentTarget);
        console.log(formData.get('rating'))
    }

    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' />
                    </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]! grid! grid-cols-2 px-2! py-2! pt-2!', TabContainerClassNames.scrollView
                                ),
                                title: 'text-sm2! font-normal mt-1',
                                header: 'rounded-lg h-7! w-full',
                                headerActive: 'bg-primary',
                                titleActive: 'text-accent'
                            }}>
                            <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'>{t("InputComment.Label")}</label>
                            <br />
                            <textarea name='userOpinion' id='userOpinion' placeholder={t("InputComment.Placeholder")} className='mt-2 w-full h-21 px-4 py-2.5 text-xs text-[#888888] rounded-xl border border-[#D0D0D0]' />
                            <br />
                        </div>
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-4 mt-6">
                    <Button type='submit' className='mt-auto rounded-xl font-normal cursor-pointer'>
                        {t("ButtonSubmit")}
                    </Button>
                    <Button type='submit' className='mt-auto rounded-xl bg-white cursor-pointer hover:bg-neutral-100 border border-foreground text-foreground font-normal'>
                        {t("ButtonCancel")}
                    </Button>
                </div>


            </form>
        </section>
    )
}

export default RatingOrderIndex