import {Typography, TextField, Box, Grid} from '@mui/material';
import { MuiTelInput, matchIsValidTel } from 'mui-tel-input'

export const PessoaContacto = ( {formik}: any ) => {

  const handleChange = (newValue: string) => {

    formik.setFieldValue('telemovelPC', newValue);
    
    const isValid = matchIsValidTel(newValue);

    if (!isValid) {
      formik.setFieldError('telemovelPC', 'Por favor insira um número de telemóvel válido');
    } else {
      formik.setFieldError('telemovelPC', '');
    }
  };

  return (
    <Box>
      <Typography variant="h6" gutterBottom>
        Pessoa De Contacto
      </Typography>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <TextField
            {...formik.getFieldProps('nomePessoaContacto')} 
            required
            type='text'
            id="nomePessoaContacto"
            name="nomePessoaContacto"
            label="Nome"
            fullWidth
            variant="standard"
            error={formik.touched.nomePessoaContacto && Boolean(formik.errors.nomePessoaContacto)}
            helperText={formik.touched.nomePessoaContacto && formik.errors.nomePessoaContacto}
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <MuiTelInput
            {...formik.getFieldProps('telemovelPC')} 
            required
            typeof='number'
            id="telemovelPC"
            name='telemovelPC'
            label="telemovel"
            value={formik.values.telemovelPC}
            fullWidth
            onChange={handleChange}
            variant="standard"
            defaultCountry="PT"
            error={formik.touched.telemovelPC && Boolean(formik.errors.telemovelPC)}
            helperText={formik.touched.telemovelPC && formik.errors.telemovelPC}
          />
        </Grid>
        <Grid item xs={12} sm={12}>
          <TextField
            {...formik.getFieldProps('emailPessoaContacto')} 
            required
            type='email'
            id="emailPessoaContacto"
            name="emailPessoaContacto"
            label="Email"
            fullWidth
            variant="standard"
            error={formik.touched.emailPessoaContacto && Boolean(formik.errors.emailPessoaContacto)}
            helperText={formik.touched.emailPessoaContacto && formik.errors.emailPessoaContacto}
          />
        </Grid>
      </Grid>
    </Box>
  );
};
