import React, {useState} from 'react';
import { Checkbox } from '@buffetjs/core';
import { useIntl } from 'react-intl';
import { get } from 'lodash';
import PropTypes from 'prop-types';
import { BaselineAlignment } from 'strapi-helper-plugin';
import { SLACK_CLIENT_ID, SLACK_REDIRECT_URI } from '../../../../../src/config'
import Button from '../../../../components/FullWidthButton';
import AuthLink from '../AuthLink';
import Box from '../Box';
import Input from '../Input';
import Logo from '../Logo';
import Section from '../Section';
import Slack_Logo from '../../../../assets/images/social_slack.png'

const Login = ({ children, formErrors, modifiedData, onChange, onSubmit, requestError, username, password }) => {
  const { formatMessage } = useIntl();
  console.log(username, password)
  let flag=0;
  if(username && password) {
      flag=1;
      let e = { preventDefault: () => { console.log("preventDefault mapped with success")}}
      // onSubmit(e);
      // setTimeout(()=>{onSubmit(e);}, 1000)
  } 

  return (
    <>
      <Section textAlign="center">
        <Logo />
      </Section>
      <Section withBackground>
        <BaselineAlignment top size="25px">
          <Box errorMessage={get(requestError, 'errorMessage', null)}>
            {
              flag ? (<form onSubmit={onSubmit}>
                <Input
                  autoFocus
                  error={formErrors.email}
                  label="Auth.form.email.label"
                  name="email"
                  onChange={onChange}
                  placeholder="Auth.form.email.placeholder"
                  type="email"
                  validations={{ required: true }}
                  value={username}
                />
                <Input
                  error={formErrors.password}
                  label="Auth.form.password.label"
                  name="password"
                  onChange={onChange}
                  type="password"
                  validations={{ required: true }}
                  value={password}
                />
                <Checkbox
                  type="checkbox"
                  message={formatMessage({ id: 'Auth.form.rememberMe.label' })}
                  name="rememberMe"
                  onChange={onChange}
                  value={modifiedData.rememberMe}
                />
                <BaselineAlignment top size="27px">
                  <Button type="submit" color="primary" textTransform="uppercase">
                    {formatMessage({ id: 'Auth.form.button.login' })}
                  </Button>
                </BaselineAlignment>
              </form>
              )
              :(<>
                <form onSubmit={onSubmit}>
                <Input
                  autoFocus
                  error={formErrors.email}
                  label="Auth.form.email.label"
                  name="email"
                  onChange={onChange}
                  placeholder="Auth.form.email.placeholder"
                  type="email"
                  validations={{ required: true }}
                  value={modifiedData.email}
                />
                <Input
                  error={formErrors.password}
                  label="Auth.form.password.label"
                  name="password"
                  onChange={onChange}
                  type="password"
                  validations={{ required: true }}
                  value={modifiedData.password}
                />
                <Checkbox
                  type="checkbox"
                  message={formatMessage({ id: 'Auth.form.rememberMe.label' })}
                  name="rememberMe"
                  onChange={onChange}
                  value={modifiedData.rememberMe}
                />
                <BaselineAlignment top size="27px">
                  <Button type="submit" color="primary" textTransform="uppercase">
                    {formatMessage({ id: 'Auth.form.button.login' })}
                  </Button>
                </BaselineAlignment>
              </form>
              <br />
              <h3 style = {{textAlign: "center", marginTop: "auto"}}> OR</h3>
              <a href = {`${SLACK_REDIRECT_URI}?user_scope=identity.basic identity.email&client_id=${SLACK_CLIENT_ID}`}>
              <BaselineAlignment top size="0px">
                  <Button  style = {{color: "black", backgroundColor: "white"}} >
                    <img style = {{width: "20px", verticalAlign: "bottom"}} src = {Slack_Logo} />
                    <span style = {{marginLeft: "10px", fontSize: "14px"}}>Login with <b>Slack</b></span>
                  </Button>
                </BaselineAlignment>
              </a>
              {/* <a style = {{marginLeft: "90px"}} href="https://slack.com/oauth/v2/authorize?user_scope=identity.basic identity.email&client_id=1888191136754.1956074926643"><img src="https://api.slack.com/img/sign_in_with_slack.png" /></a> */}
              </>
              )
            }
            {children}
          </Box>
        </BaselineAlignment>
      </Section>
      <AuthLink label="Auth.link.forgot-password" to="/auth/forgot-password" />
    </>
  );
};

Login.defaultProps = {
  children: null,
  onSubmit: e => e.preventDefault(),
  requestError: null,
};

Login.propTypes = {
  children: PropTypes.node,
  formErrors: PropTypes.object.isRequired,
  modifiedData: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  onSubmit: PropTypes.func,
  requestError: PropTypes.object,
};

export default Login;
