pixelstreamingwebreact/src/components/mainPart/form/form.tsx

import React, { useState } from "react";
import './form.css';
import { useForm, Controller } from 'react-hook-form';
import { InputProps, styled, TextField, TextFieldProps } from "@mui/material";
import { PinkButton } from "../button";
import { StyledOptions } from "@emotion/styled";
import { MUIStyledCommonProps } from "@mui/system";

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 {control, handleSubmit} = useForm<FormData>();
    const [isError, setIsError] = useState(false);
    
    const CustomizedTextField = styled(TextField)`
        background: #322948;
        border-radius: 8px;
        & label {
            color: #B196AF;
            font-weight: 500;
            font-size: 17px;
            line-height: 21px;
        }
        & input {
            color: #FFFFFF;
            font-weight: 500;
            font-size: 17px;
            line-height: 21px;
        }
        & input:hover {
            border: none;
        }        
        & label.Mui-focused {
            color: #B196AF;
        }
        & .MuiTextField-root:hover {
            
        }
        .bottom-line-color(red)     
        & .MuiFilledInput-underline:before {
            border: none;           
        }  
        & .MuiFilledInput-underline:before-focused {
            border-bottom-color: red;
        }
        & .MuiOutlinedInput-root {
            & fieldset {
                border-color: red;
                color: red;
            }
            &.Mui-focused fieldset {
                border-color: white;
            }
        }

    `;

    function onSubmit(data: FormData) { 
        if(!(data.email && data.firstName && data.phone)) {
            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="phone"
                control={control}
                defaultValue=''                
                render={({ field }) => 
                    <CustomizedTextField 
                        {...field}
                        // variant={"filled"}
                        variant={isError && field.value === '' ? 'outlined' : "filled"}
                        // required
                        size="medium"
                        label='Номер телефона'
                        autoComplete="off"
                        type={'number'}
                        error={isError && field.value === ''}
                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
                    />
                }
            />
            <Controller
                name="email"
                control={control}
                defaultValue=''
                render={({ field }) =>
                    <CustomizedTextField                        
                        {...field}
                        // variant={"filled"}
                        variant={isError && field.value === '' ? 'outlined' : "filled"}
                        size="medium"
                        label='E-mail'
                        // required
                        type={"email"}
                        autoComplete="off"
                        error={isError && field.value === ''}
                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
                    />                    
                }
            />
            <Controller
                name="firstName"
                control={control}
                defaultValue=''
                render={({ field }) => 
                    <CustomizedTextField
                        {...field} 
                        // variant={"filled"}
                        variant={isError && field.value === '' ? 'outlined' : "filled"}
                        size="medium"
                        label='Ваше имя'
                        // required
                        type={'text'}
                        autoComplete="off"
                        error={isError && field.value === ''}
                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
                    />
                }
            />
            <PinkButton 
                type="submit" 
                textButton={'Записаться на просмотр'}
                width='100%'
            />
        </form>
    </div>
})