import React, { useEffect, useState } from "react"

// Redux
import { useDispatch, useSelector } from "react-redux"
import { actionCreators as loaderActionCreators } from '../../store/reducers/Loader'

import { Button, Container, Form, FormGroup, Input, Label } from "reactstrap"
import { ApplicationState } from "../../store"

import './scss/style.scss'

interface IStateProp {
  [key: string]: string | boolean;
}

interface IState extends IStateProp {
  username: string,
  
  email: string,
  reEmail: string,

  password: string,
  rePassword: string,

  tnc: boolean
}

const Signup = () => {
  const dispatch = useDispatch()
  const { content } = useSelector((state: ApplicationState) => state)

  const {
    title = "",
    username = {
      title: "",
      placeHolder: ""
    },
    email = {
      title: "",
      placeHolder: ""
    },
    reEmail = {
      title: "Repeat email address",
      placeHolder: "Repeat email address..."
    },
    password = {
      title: "",
      placeHolder: ""
    },
    rePassword = {
      title: "Repeat password",
      placeHolder: "Repeat password..."
    },
    acceptTermsAndConditions = "",
    submit = {
      title: ""
    }
  } = content?.signUp ? content.signUp : {} 

  useEffect(() => {
    content?.isLoading
      ? dispatch(loaderActionCreators.show())
      : setTimeout(() => {
        dispatch(loaderActionCreators.hide())
      }, 1000)
  }, [content?.isLoading])


  const [state, hookState] = useState<IState>({
    username: '',

    email: '',
    reEmail : '',
    
    password: '',
    rePassword: '',

    tnc: false
  })

  const setState = (props: IStateProp) => {
    const newState = { ...state }
    Object.keys(props).forEach(key => newState[key] = props[key])
    hookState(newState)
    return newState
  }

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setState({ [name]: value })
  }

  const onTogle = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name } = e.target
    setState({ [name]: !state[name] })
  }

  return <Container className="container">
    <h2>{title}</h2>
    <Form className="form">
      <FormGroup>
        <Label for="username">{username.title}</Label>
        <Input
          type="text"
          name="username"
          id="username"
          placeholder={username.placeHolder}
          value={state.username}
          onChange={onChange} />
      </FormGroup>
      <FormGroup>
        <Label for="email">{email.title}</Label>
        <Input
          type="text"
          name="email"
          id="email"
          placeholder={email.placeHolder}
          value={state.email}
          onChange={onChange} />
      </FormGroup>
      <FormGroup>
        <Label for="reEmail">{reEmail.title}</Label>
        <Input
          type="text"
          name="reEmail"
          id="reEmail"
          placeholder={reEmail.placeHolder}
          value={state.reEmail}
          onChange={onChange} />
      </FormGroup>
      <FormGroup>
        <Label for="password">{password.title}</Label>
        <Input
          type="password"
          name="password"
          id="password"
          placeholder={password.placeHolder}
          value={state.password}
          onChange={onChange} />
      </FormGroup>
      <FormGroup>
        <Label for="rePassword">{rePassword.title}</Label>
        <Input
          type="password"
          name="rePassword"
          id="rePassword"
          placeholder={rePassword.placeHolder}
          value={state.rePassword}
          onChange={onChange} />
      </FormGroup>
      <FormGroup check>
        <Input type="checkbox" name="tnc" id="tnc" checked={state.tnc} onChange={onTogle}/>
        <Label check>{acceptTermsAndConditions}</Label>
      </FormGroup>
      <Button>{submit.title}</Button>
    </Form>
  </Container>
}

export {
  Signup
}
