import { useForm, Controller } from 'react-hook-form'
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import {
    Button,
    CircularProgress,
    Link,
    Typography,
    FormControlLabel,
    Checkbox,
} from '@sofaltaeu/sofaltaeu-components'
import { Form, ContainerButton, ContainerFormPrivacidade, FormGroup, ContainerOfertas } from './styled'
import { CreateAccount } from '../../../interfaces/services/ICreateUser'

import { useState } from 'react';

const formPrivacidadeSchema = z
	.object({
        isTermos: z.boolean(),
        isMarketing: z.boolean(),
        isMarkentingEmail: z.boolean(),
        isMarkentingTelefone: z.boolean()
})

type FormPrivacidadeSchema = z.infer<typeof formPrivacidadeSchema>

interface FormPrivacidadeProps {
    nextSetp: () => void
    prevSetp: () => void
    state: CreateAccount
    setState: (payload:CreateAccount) => void,
    dominioSFE: string,
    isLoading: boolean
}
export const FormPrivacidade = ({ state, nextSetp, prevSetp, setState, dominioSFE, isLoading = false }:FormPrivacidadeProps) => {
	const { handleSubmit, register, setValue, control, getValues } = useForm<FormPrivacidadeSchema>({
		resolver: zodResolver(formPrivacidadeSchema),
		mode: "onBlur",
        defaultValues: {
            isTermos: true,
            isMarketing: state.isMarketing,
            isMarkentingEmail: state.isMarkentingEmail,
            isMarkentingTelefone: state.isMarkentingTelefone
        }
	});
    const [checked, setChecked] = useState([getValues('isMarkentingEmail'), getValues('isMarkentingTelefone')]);
    const handleChangeIsMarketing = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked([event.target.checked, event.target.checked]);
        setValue('isMarkentingEmail', event.target.checked);
        setValue('isMarkentingTelefone', event.target.checked);
      };

      const handleChangeIsMarkentingEmail = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked([event.target.checked, checked[1]]);
      };

      const handleChangeIsMarkentingTelefone = (event: React.ChangeEvent<HTMLInputElement>) => {
        setChecked([checked[0], event.target.checked]);
      };


    const submit = (data:FormPrivacidadeSchema) => {
        const newState = {...state, ...data}
        setState(newState)
        nextSetp()
    }


    return (
        <Form onSubmit={handleSubmit(submit)}>
            <ContainerFormPrivacidade>
                <FormGroup>
                    <FormControlLabel
                        required
                        control={<Checkbox defaultChecked {...register('isTermos')}/>}
                        label={
                                <Typography variant='body2'>
                                    Aceito, enquanto usuário dos serviços do SóFalta.eu, os
                                    <Link target="_blank" href={`${dominioSFE}/privacy`} underline="hover"> Termos de Serviço e Política de Privacidade</Link>
                                </Typography>
                            }
                    />
                    <Controller
                        control={control}
                        name="isMarketing"
                        render={({ field: { onChange} }) => (
                            <FormControlLabel
                                control={
                                    <Checkbox
                                        {...register('isMarketing')}
                                        checked={checked[0] && checked[1]}
                                        indeterminate={checked[0] !== checked[1]}
                                        onChange={(event)=>{
                                            handleChangeIsMarketing(event)
                                            onChange(event)
                                        }}
                                    />
                                }
                                label={
                                    <Typography variant='body2'>
                                        Desejo que o SóFalta.Eu mantenha-me informado sobre serviços e ofertas.
                                    </Typography>
                                }
                            />
                        )}

                    />
                    <ContainerOfertas>
                        <Controller
                            control={control}
                            name="isMarkentingEmail"
                            render={({ field: { onChange} }) => (
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            {...register('isMarkentingEmail')}
                                            onChange={(event)=>{
                                                handleChangeIsMarkentingEmail(event)
                                                onChange(event)
                                            }}
                                            checked={checked[0]}
                                        />
                                    }
                                    label={
                                        <Typography variant='body2'>
                                            Por e-mail
                                        </Typography>
                                    }
                                />
                            )}
                        />
                        <Controller
                            control={control}
                            name="isMarkentingTelefone"
                            render={({ field: { onChange} }) => (
                                <FormControlLabel
                                    control={
                                        <Checkbox
                                            {...register('isMarkentingTelefone')}
                                            onChange={(event)=>{
                                                handleChangeIsMarkentingTelefone(event)
                                                onChange(event)
                                            }}
                                            checked={checked[1]}
                                        />
                                    }
                                    label={
                                        <Typography variant='body2'>
                                            Por telefone
                                        </Typography>
                                    }
                                />
                            )}
                        />


                    </ContainerOfertas>

                </FormGroup>
                <ContainerButton>
                    <Button
                        onClick={() => prevSetp()}
                        fullWidth
                        variant="outlined"
                        disabled={isLoading}
                    >
                        Voltar
                    </Button>
                    <Button type='submit' fullWidth disabled={isLoading}>
                        {isLoading ? <CircularProgress size={24} color='inherit'/> : 'Cadastrar'}
                    </Button>

                </ContainerButton>
            </ContainerFormPrivacidade>
        </Form >

    )
}