"use client";

import Button from '@/components/button/PrimaryButton';
import InputField from '@/components/input/InputField';
import { ef, ue } from '@/lib/helpers/utfNumbers';
import { ArrowLeft, ArrowRight, WalletMinus } from 'iconsax-react';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react'

type Props = object

function UserWalletIndex({ }: Props) {
    const router = useRouter();
    const [chargeValue, setChargeValue] = useState<string>('0');
    const chargeAction = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const data = new FormData(e.currentTarget)
        const value = Number(ue(String(data.get('chargeValue') ?? 0))) + 0;
        console.log("Charge for: ", value);
    }

    return (
        <div className='overflow-y-auto h-full noscrollbar flex flex-col'>
            <div className='grid grid-cols-3 items-center'>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>پروفایل کاربری</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => { router.back() }}
                />
            </div>

            <form
                onSubmit={chargeAction}
                className="mt-8 flex-1 h-full bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">

                <div className="">
                    <div className="flex items-center justify-center text-center gap-4 pb-6 border-b-[1.5px] border-border">
                        <div className='block'>
                            <div className='font-medium text-sm flex items-center gap-2'>
                                <WalletMinus className='size-5 stroke-foreground mb-0.5' />
                                موجودی کیف پول
                            </div>
                            <div className='text-sm text-primary mt-3 inline-flex dark:text-neutral-200 items-center gap-2'>
                                {ef('250.000 تومان')}
                            </div>
                        </div>
                    </div>

                    <div className="grid gap-3 mt-6">
                        <div className='inline-flex items-center mb-3 gap-2.5 text-sm2'>
                            برای شارژ کیف پول خود میتوانید بر روی یکی از مبالغ زیر کلیک کنید و یا مبلغ دلخواه خود را وارد کنید
                        </div>
                        <Button
                            type='button'
                            onClick={() => setChargeValue('50000')}
                            className='!bg-disabled text-sm2 !text-foreground flex justify-between items-center'
                        >
                            <ArrowRight className='stroke-foreground size-5' />
                            <span className='mt-0.5'>
                                {ef('50,000 تومان')}
                            </span>
                        </Button>
                        <Button
                            type='button'
                            onClick={() => setChargeValue('150000')}
                            className='!bg-disabled text-sm2 !text-foreground flex justify-between items-center'
                        >
                            <ArrowRight className='stroke-foreground size-5' />
                            <span className='mt-0.5'>
                                {ef('150,000 تومان')}
                            </span>
                        </Button>
                        <Button
                            type='button'
                            onClick={() => setChargeValue('300000')}
                            className='!bg-disabled text-sm2 !text-foreground flex justify-between items-center'
                        >
                            <ArrowRight className='stroke-foreground size-5' />
                            <span className='mt-0.5'>
                                {ef('300,000 تومان')}
                            </span>
                        </Button>
                        <InputField
                            className='bg-container mt-7'
                            labelText='مبلغ دلخواه (تومان)'
                            dir='ltr'
                            inputMode='decimal'
                            htmlFor='chargeValue'
                            placeholder=''
                            value={ef(chargeValue)}
                            onChange={(e) => setChargeValue(e.target.value)}
                        />
                    </div>
                </div>

                <div className='w-full text-center mt-6'>
                    <Button
                        type='submit'
                    >
                        شارژ کیف پول
                    </Button>
                </div>
            </form>
        </div>
    )
}

export default UserWalletIndex