import {Grid, Typography, TextField, Select, MenuItem, FormControlLabel, Checkbox, InputLabel, SelectChangeEvent, Link} from '@mui/material';
import { useState } from 'react';

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

  const [selectedValue, setSelectedValue] = useState(1);

  const handleChange = (event: SelectChangeEvent<unknown>) => {
    setSelectedValue(event.target.value as number);
    formik.setFieldValue( 'numcartoes', event.target.value);
  };

  const renderInput = () => {
    const inputFields = [];
    for (let i = 1; i <= selectedValue; i++) {
      const inputId = `nomecartao${i}`;
  
      inputFields.push(
        <TextField
          {...formik.getFieldProps(inputId)}
          sx={{ mt: 3 }}
          key={i}
          fullWidth
          required
          label={`Digite o nome do ${i}º cartão`}
          variant="standard"
          id={inputId}
          name={inputId}
          value={formik.values[inputId] || ''}
          onChange={(e) => {
            formik.handleChange(e);
          }}
        />
      );
    }
    return inputFields;
  };

  return (
    <>
      <Typography variant="h6" gutterBottom>
        Cartoes
      </Typography>

      <Grid container spacing={3}>
        <Grid item xs={12} sm={12}>
          <InputLabel id="labelnumcartoes">Numero e cartões</InputLabel>
          <Select
            {...formik.getFieldProps('numcartoes')} 
            required
            labelId="labelnumcartoes"
            id="numcartoes"
            name="numcartoes"
            label="Numero de cartões"
            variant="standard"
            fullWidth
            value={selectedValue}
            onChange={ (e) => handleChange (e)}
            >
            <MenuItem value={1}>1 Cartão</MenuItem>
            <MenuItem value={2}>2 Cartões</MenuItem>
            <MenuItem value={3}>3 Cartões</MenuItem>
            <MenuItem value={4}>4 Cartões</MenuItem>
            <MenuItem value={5}>5 Cartões</MenuItem>
          </Select>

          {renderInput()}

          <Typography variant="h6" sx={{ mt: 4 }}>
            Condições Gerais
          </Typography>
          <Typography sx={{ mt: 2 }}>
            1. OBJETO DO CONTRATO O objeto do presente contrato estabelece as
            condições de fornecimento de energia elétrica pela High Green Power,
            Lda. ao conjunto de fornecimentos de mobilidade elétrica na rede
            pública MOBI.E dos consumos alocados ao Cliente, nos termos e
            condições constantes das presentes Condições Particulares e das
            Condições Gerais (adiante abreviadamente designado por "Contrato").
          </Typography>
          <Typography sx={{ mt: 2 }}>
            2. DURAÇÃO O contrato tem a duração de 12 meses, sendo o seu início
            na assinatura do presente contrato. Findo o prazo inicial, salvo
            oposição à renovação por qualquer uma das partes, o contrato
            renova-se automática e sucessivamente por iguais períodos de 1 ano.
            Qualquer uma das partes se pode opor à renovação do contrato, para o
            seu termo inicial ou de qualquer uma das suas renovações sucessivas,
            desde que o comunique à contra-parte com um pré-aviso mínimo de 30
            (trinta) dias face ao termo do período que se encontrar em curso.
          </Typography>
          <Typography sx={{ mt: 2 }}>
            3. PREÇO O preço final para o fornecimento de energia elétrica
            resultará do somatório da Energia Ativa, do Certificado de Origem
            Renovável e do Acesso às Redes definida pela ERSE, para aplicação à
            mobilidade elétrica. Sempre que se verifiquem alterações no decorrer
            do contrato, as mesmas serão repercutidas de forma imediata. O preço
            da Energia Ativa + Certificado de Origem Renovável é de 0,095 €/KWh,
            tanto para o periodo de Fora de Vazio, como para o periodo de Vazio.
            Estes preços podem ser atualizados nas renovações de contrato. Falta
            acrescentar as tarifas de Acesso às Redes, definidas pela ERSE, para
            aplicação à mobilidade elétrica. Aos Preços referidos acresce:
            Imposto sobre o valor acrescentado à taxa legal em vigor; Quaisquer
            outros custos, como a potência, encargos, impostos, taxas e
            contribuições que, nos termos da legislação e regulamentação
            aplicáveis, devam ser cobrados os consumidor final pelos
            comercializadores livres, serão repercutidos de forma direta e
            transparente na fatura emitida.
          </Typography>
          <Typography sx={{ mt: 2 }}>
            4. FATURAÇÃO A faturação é emitida pela High Green Power, Lda. com a
            periodicidade Mensal e é referente ao fornecimento de energia
            elétrica disponibilizado ao Cliente no mês anterior, onde se incluem
            todos os encargos assumidos por todos os intervenientes organizados
            pela gestora da rede Mobi-e, também referentes ao mês anterior. A
            faturação é emitida pela High Green Power, Lda. em suporte
            eletrónico e enviada para o email do Cliente (Notificações e
            Comunicações). A faturação pode ter por base a informação sobre os
            dados do consumo efetivo disponibilizada pela entidade gestora da
            rede Mobi-e.
          </Typography>
          <Typography sx={{ mt: 2 }}>
            5. PAGAMENTO A High Green Power, Lda. e o Cliente acordam que o
            pagamento será realizado mediante o sistema de Débito Direto SEPA,
            para isso o Cliente deve preencher e assinar o mandato de
            autorização de Débito Direto SEPA disponibilizado pela High Green
            Power, Lda. constante do Anexo ao presente Contrato e entregar o
            mandato devidamente preenchido e assinado.
          </Typography>
          <FormControlLabel
            sx={{ mt: 2 }}
            required
            control={<Checkbox />}
            label="O Cliente declara ter recebido e tomado conhecimento das Condições Gerais e Anexo às Condições Económicas - Contrato Dual que em conjunto com as Condições Particulares são parte integrante do Contrato. Concordando e aceitando a totalidade do seu conteúdo, assina o presente Contrato."
          />
          <FormControlLabel
            sx={{ mt: 2 }}
            required
            control={<Checkbox />}
            label={
              <>
                O Cliente declara ter recebido e tomado conhecimento da{' '}
                <Link href="https://www.highgreenpower.pt/wp-content/uploads/2023/07/Politica-de-Privacidade-e-Cookies-HGP.pdf">
                  Política de Privacidade
                </Link>{' '}
                da High Green Power, Lda.
              </>
            }
          />
          <FormControlLabel
            sx={{ mt: 2 }}
            required
            control={<Checkbox />}
            label="Cliente declara ter lido as Condições Gerais e que percebe que, ao aceitar este contrato, o mesmo passa a estar legalmente activo para todos os efeitos. Confirmo que percebe e aceita as Condições de Utilização da Rede de Mobilidade Elétrica em Portugal."
          />
          <FormControlLabel
            sx={{ mt: 2 }}
            required
            control={<Checkbox />}
            label="Cliente declara aceitar disponibilizar o contarcto telefonico direto à EGME (Entidade Gestora da Mobilidade Elétrica) para efeitos do previsto no n.º 3 - do Artigo 9º do RME - Regulament da Mobilidade Elétrica"
          />
          <FormControlLabel
            sx={{ mt: 2 }}
            required
            control={<Checkbox />}
            label="Cliente declara desejar partilhar os seus dados de contracto com os parceiros da High Green Power, Lda. de modo a poder ser elegível para promoções (opcional)"
          />
          <TextField
            {...formik.getFieldProps('notasAdicionais')}
            sx={{ mt: 4 }}
            id="notasAdicionais"
            label="Notas adicionais"
            fullWidth
            multiline
            rows={4}
          />
        </Grid>
      </Grid>
    </>
  );
};
