import React, { useContext, useState } from "react";
import './form.css';
import { useForm, Controller } from 'react-hook-form';
import { styled, SxProps, TextField} from "@mui/material";
import { PinkButton } from "../pinkButton";
import { ContextLang } from "../../ContextLang";
import { LangDict } from "../../langDict";

type TProps = {
    dateInfo: string
    onSubmit: (data: FormData, date: string) => void
}

type FormData = {
    phone: string
    email: string
    firstName: string
}

export const Form:React.FC<TProps> = React.memo((props) => {
    const {lang} = useContext(ContextLang);
    const {control, handleSubmit} = useForm<FormData>();
    const [isError, setIsError] = useState(false);
    const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    

    const errorStyle: SxProps = {
        '& .MuiFilledInput-root.Mui-error': {
            border: '1px solid #EB5757',
            borderRadius: '8px',
            
        },
        '& label.Mui-error': {
            color: '#EB5757'
        },
        '& .MuiFormHelperText-root.Mui-error': {
            color: '#EB5757'
        }
    }
    
    const CustomizedTextField = styled(TextField)`        
        & label {
            color: #B196AF;
            font-weight: 500;
            font-size: 17px;
            line-height: 21px;
        }
        & input {
            color: #FFFFFF;
            font-weight: 500;
            font-size: 17px;
            line-height: 21px;
            background: #322948;
            border-radius: 8px;
        }                
        & label.Mui-focused {
            color: #B196AF;
        }        
    `;

    function onSubmit(data: FormData) { 
        if(!(data.email && data.firstName && data.phone)) {
            setIsError(true);
            return
        }
        if(!EMAIL_REGEXP.test(data.email)) {
            setIsError(true);
            return
        }
        // console.log(data)
        props.onSubmit(data, props.dateInfo)
    }

    return <div className="request-form-container">
        {/* <span className="request-form-date">
            {props.dateInfo}
        </span>      */}
        <form className="request-form" onSubmit={handleSubmit(onSubmit)}>
            <Controller
                name="firstName"
                control={control}
                defaultValue=''
                render={({ field }) => 
                    <CustomizedTextField
                        sx={errorStyle}
                        {...field}
                        InputProps={{disableUnderline: true}}
                        variant={"filled"}
                        size="medium"
                        label={LangDict.formName[lang]}
                        type={'text'}
                        autoComplete="off"
                        error={isError && field.value === ''}
                        helperText={isError && field.value === '' ? LangDict.formEmptyError[lang] : ''}
                    />
                }
            />
            <Controller
                name="phone"
                control={control}
                defaultValue=''                
                render={({ field }) => 
                    <CustomizedTextField 
                        sx={errorStyle}
                        {...field}
                        InputProps={{disableUnderline: true}}
                        variant={"filled"}
                        size="medium"
                        label={LangDict.formPhone[lang]}
                        autoComplete="off"
                        type={'number'}
                        error={isError && field.value === ''}
                        helperText={isError && field.value === '' ? LangDict.formEmptyError[lang] : ''}
                    />
                }
            />
            <Controller
                name="email"
                control={control}
                defaultValue=''
                render={({ field }) =>
                    <CustomizedTextField
                        sx={errorStyle}
                        {...field}
                        InputProps={{disableUnderline: true}}
                        variant={"filled"}
                        size="medium"
                        label='E-mail'
                        autoComplete="off"
                        error={(isError && field.value === '') || (isError && !EMAIL_REGEXP.test(field.value))}
                        helperText={
                            isError && field.value === '' 
                            ? LangDict.formEmptyError[lang] 
                            : isError && !EMAIL_REGEXP.test(field.value) 
                            ? LangDict.formErrorEmail[lang]
                            : null
                        }
                    />
                }
            />            
            <PinkButton 
                type="submit" 
                textButton={LangDict.checkoutButton[lang]}
                width='100%'
            />
        </form>
    </div>
})