import qrCode from '../../../img/icons8-telegram-app.svg'
import { makeStyles, Button, TextField, MenuItem } from '@material-ui/core'
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import React from 'react';

import { countries } from './countries'



const useStyles = makeStyles({
  container: {
    display: 'flex',
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'column',
    width: 350,
    margin: '0 auto',
    paddingTop: 64,
    paddingBottom: 24,
  },
  picture: {
    marginBottom: 16,
    paddingLeft: 45
  },
  title: {
    textAlign: 'center',
    marginBottom: 16,
  },
  titleConfirm: {
    color: '#b4b4b4',
    fontWeight:400
  },
  buttonQR: {
    marginTop: 20,
    height: 50,
    color: '#5497f0'
  },
  buttonNext: {
    marginTop: 20,
    height: 50,
    color: '#f8f8f8',
    backgroundColor:'#1d74c5',
  },
  textField: {
    marginBottom:20
  },
})

interface IAuthorizationForm {
  handleIsQR: () => void,
  handleIsCheck:(e:React.ChangeEvent<HTMLInputElement>) => void
  handleSendCode: () => Promise<void>,
  number:string,
  setNumber: React.Dispatch<React.SetStateAction<string>>,
  country: string,
  setCountry: React.Dispatch<React.SetStateAction<string>>,
  isChecked: boolean,
}
interface ICountry {
  name: string,
  code: string
}

const Authorization = ({
  handleIsQR,
  handleIsCheck,
  handleSendCode,
  number,
  setNumber,
  country,
  setCountry,
  isChecked,
}: IAuthorizationForm) => {
  const classes = useStyles()

    const isValidCredentials = () => {
    const numberLength = number.split(' ').join('').trim().length
    if (numberLength < 13 || numberLength > 13) return false
    if (!country || country === 'Country') return false
    if(number.slice(0,1) === '+') return true
    return true
  }


  const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    const name = e.target.name
    switch (name) {
      case 'country':
        setCountry(value)
        const code = countries.find(el => el.name === value)?.code
        code&&setNumber(code)
        break;
      case 'number':
        setNumber(value)
        break;
      default:
        break;
    }
  }

  return (
    <div className={classes.container} >
      <img className={classes.picture} alt="QRCode" src={qrCode} width='270' height='270' />
      <h2 className={classes.title}>Telegram</h2>
      <h4 className={classes.title + ' ' + classes.titleConfirm}>
        Please confirm your country code and enter your phone number.
      </h4>
      <TextField
        id="country"
        name='country'
        label="Country"
        fullWidth
        variant='outlined'
        defaultValue=''
        select
        className={classes.textField}
        onChange={handleTextField}
      >
        {countries.map(({name}: ICountry) => (
          <MenuItem value={name}  key={name}>
            {name}
          </MenuItem>
        ))}
      </TextField>
      <TextField
        id="number"
        name='number'
        label="Your phone number"
        value={number}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
      />
      <FormControlLabel
        label="Keep me signed in"
        control={<Checkbox
         checked={isChecked}
         onChange={handleIsCheck}
         inputProps={{ 'aria-label': 'controlled' }}
        />}
      />
      {isValidCredentials() &&
        <Button
        onClick={handleSendCode}
        className={classes.buttonNext}
        color='primary'
        variant="contained"
        fullWidth>
        NEXT
      </Button>}

      <Button
        onClick={handleIsQR}
        className={classes.buttonQR}
        variant="text"
        color="default"
        fullWidth>
        LOG IN BY QR CODE
      </Button>
    </div>
  );
};

export default Authorization;