import * as React from "react";
import * as yup from 'yup';
import { DadosPessoais } from "./DadosPessoais";
import { PessoaContacto } from "./PessoaContacto";
import { Cartoes } from "./Cartoes";
import { Box, Container, Grid, Typography, Button, Stepper, Step, StepLabel } from "@mui/material";
import { useFormik } from 'formik';
import { useState } from "react";
import { matchIsValidTel } from 'mui-tel-input';

interface dados {

  empresa: string;
  nif?: string;
  representante: string;
  telemovelDP: string;
  emailDP: string;
  morada?: string;
  andar?: string;
  pais?: string;
  cidade?: string;
  codigoPostal?: string;

  nomePessoaContacto: string;
  telemovelPC: string;
  emailPessoaContacto: string;

  numcartoes: number;
  nomecartao1: string[];
  notasAdicionais: string;

}

const initialValues: dados = {

  empresa: '',
  nif: undefined,
  representante: '',
  telemovelDP: '',
  emailDP: '',
  morada: '',
  andar: undefined,
  pais: 'Portugal',
  cidade: '',
  codigoPostal: undefined,

  nomePessoaContacto: '',
  telemovelPC: '',
  emailPessoaContacto: '',

  numcartoes: 1,
  nomecartao1: [],
  notasAdicionais:'',

}

function App() {

  const steps = ["Dados Pessoais", "Pessoa de Contacto", "Cartões"];

  const [validationErrors, setValidationErrors] = useState<string[]>([]);

  const schemaStep1 = yup.object({

    empresa: yup.string().required("*Por favor insira um nome válido"),
    nif: yup.string().matches(/^[0-9]+$/, "*Por favor insira um NIF válido").length(9, "*O NIF deve ser composto por 9 dígitos"),
    representante: yup.string().required("*Por favor insira um representante válido"),
    telemovelDP: yup.string()
    .required(' ')
    .test('is-valid-phone', "*Por favor insira um número de telemóvel válido", (value) => {
      return matchIsValidTel(value);
    }),
    emailDP: yup.string()
      .email("*Por favor insira um email válido")
      .required("*Por favor insira um email válido"),
    morada: yup.string(),
    andar: yup.string().matches(/^[0-9]+$/, "*Por favor insira um Andar válido"),
    cidade: yup.string().required("*Por favor insira uma Cidade válida"),
    pais: yup.string(),
    codigoPostal: yup.string()

  });

  const schemaStep2 = yup.object({

    nomePessoaContacto: yup.string().required("*Por favor insira um nome de empresa válido"),
    telemovelPC: yup.string()
      .required("*Por favor insira um número de telemóvel válido")
      .test('is-valid-phone', '*Por favor insira um número de telemóvel válido', (value) => {
        return matchIsValidTel(value);
      }),
    emailPessoaContacto: yup.string()
      .email("*Por favor insira um email válido")
      .required("*Por favor insira um email válido")
  });

  const schemaStep3 = yup.object({

    numcartoes: yup.number()
      .positive()
      .integer()
      .required("*Por favor insira um numero de cartões válido"),
    nomecartao1: yup.string(),
    nomecartao2: yup.string(),
    nomecartao3: yup.string(),
    nomecartao4: yup.string(),
    nomecartao5: yup.string(),
    notasAdicionais: yup.string()
    
  });

  const validationSchema = yup.object({
    ...schemaStep1.fields,
    ...schemaStep2.fields,
    ...schemaStep3.fields,
  });

  const onSubmit = (values: dados) => {
    console.log('Dados: ', values);
  }

  const formik = useFormik<dados>  ({
    validateOnMount: true,
    validateOnBlur: false,
    initialValues,
    validationSchema,
    onSubmit
  })

  function getStepContent(step: number) {
    switch (step) {
      case 0:
        return <DadosPessoais formik={formik} />;
      case 1:
        return <PessoaContacto formik={formik} />;
      case 2:
        return <Cartoes formik={formik} />;
      default:
        throw new Error("Unknown step");
    }
  }

  const [activeStep, setActiveStep] = React.useState(0);

  const handleNext = async () => {
    try {

      if (activeStep === 0) {
        await schemaStep1.validate(formik.values, { abortEarly: false });
      } else if (activeStep === 1) {
        await schemaStep2.validate(formik.values, { abortEarly: false });
      } else if (activeStep === 2) {
        await schemaStep3.validate(formik.values, { abortEarly: false });
      }
  
      setActiveStep(activeStep + 1);
      setValidationErrors([]);
      
    } catch (error) {
      const errors = (error as yup.ValidationError).errors;
      console.error('Validação Falhada:', (error as yup.ValidationError).errors);
      setValidationErrors(errors);
    }
  };

  const handleBack = () => {  

    setActiveStep(activeStep - 1);

  };

  return (
    <Container maxWidth="xl">
      <Box sx={{ flexGrow: 1 }}>
        <Grid container spacing={2}>
          <Grid item xs={12} md={5}>
            <Typography variant="h4">Registo na Plataforma</Typography>
            <Typography sx={{ mt: 2 }}>
              Oferecemos aos nossos clientes um vasto leque de serviços técnicos
              de engenharia, que vão desde a conceção, instalação, manutenção e
              exploração de instalações e equipamentos de acordo com as
              exigências de cada negócio.
            </Typography>
            <Typography sx={{ mt: 2 }}>
              A High Green Power apresenta soluções personalizadas que vão ao
              encontro de cada cliente, sempre com o intuito de otimizar a
              eficiência com vista à obtenção de uma maior rentabilidade
              financeira, tendo como principal objetivo a satisfação plena dos
              nossos clientes.
            </Typography>
            <Typography variant="h5" sx={{ mt: 2 }}>
              Peça o seu cartão CEME no formulário.
            </Typography>
          </Grid>
          <Grid item xs={12} md={7}>

            <Stepper activeStep={activeStep} sx={{ pt: 3, pb: 5 }}>
              {steps.map((label) => (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                </Step>
              ))}
            </Stepper>
              
              <form onSubmit={formik.handleSubmit}>

                <Box sx={{ pb: 2 }}>
                  {getStepContent(activeStep)}
                </Box>

                {validationErrors.map((error, index) => (
                  <Box 
                  sx={{ mt: 1, color: 'red'}}
                  key={index}>
                    {error}
                  </Box>
                ))}

                {(activeStep < steps.length - 1) && (

                  <Button
                    type="button"
                    variant="contained"
                    onClick={handleNext}
                    sx={{ mt: 3, ml: 1 }}
                  >
                    Avançar
                  </Button>

                )}

                {(activeStep === steps.length - 1) && (

                  <Button
                    type="submit"
                    variant="contained"
                    sx={{ mt: 3, ml: 1 }}
                  >
                    Finalizar
                  </Button>

                )}
                
                {(activeStep > 0) && (activeStep < steps.length) && (

                  <Button
                    type="button"
                    variant="contained"
                    onClick={handleBack}
                    sx={{ mt: 3, ml: 1 }}
                  >
                    Retroceder
                  </Button>

                )}

              </form>  

          </Grid>
        </Grid>
      </Box>
    </Container>
  );
}

export default App;
