import React, { useState } from 'react';
import { Grid, Box, Typography, Button } from '@mui/material';
import { useDispatch } from 'react-redux';
import { sha256 } from 'js-sha256';
import CustomTextField from '../../components/forms/custom-elements/CustomTextField';
import CustomFormLabel from '../../components/forms/custom-elements/CustomFormLabel';
import PageContainer from '../../components/container/PageContainer';

import img1 from '../../assets/images/backgrounds/login-bg.svg';
import LogoIcon from '../../layouts/full-layout/logo/LogoIcon';
import APIs from '../../api/APIs';
import { AUTH_INFO } from '../../constants/SessionStorage';
import URLInfo from '../../constants/URLInfo';
import './Header.css';


const Login = () => {
  const dispatch = useDispatch();

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleClickLogin = async () => {
    await APIs.signin(email, sha256(password)).then((res) => {
      const info = { ...res, email };
      const authInfo = JSON.stringify(info);

      sessionStorage.setItem(AUTH_INFO, authInfo);

      window.location.href = URLInfo.HOME;
    }).catch(() => {
      alert('로그인에 실패하였습니다.');
    })
  }

  const handleClickLoginMaster = async () => {
    await APIs.signin('hashlike@hashlike.io', sha256('hashlike1!')).then((res) => {
      const info = { ...res, email: 'hashlike@hashlike.io' };
      const authInfo = JSON.stringify(info);

      sessionStorage.setItem(AUTH_INFO, authInfo);

      const returnURL = new URLSearchParams(window.location.search).get(URLInfo.SEARCH_PARAM.RETURN_URL);

      window.location.href = returnURL || URLInfo.HOME;
    }).catch(() => {
      alert('로그인에 실패하였습니다.');
    })
  }

  return (
    <PageContainer title="Login" description="this is Login page">
      <Grid container spacing={0} sx={{ height: '100vh', justifyContent: 'center' }}>
        <Grid
          item
          xs={12}
          sm={12}
          lg={6}
          sx={{
            background: (theme) => `${theme.palette.mode === 'dark' ? '#1c1f25' : '#ffffff'}`,
          }}
        >
          <Box
            sx={{
              position: 'relative',
            }}
          >
            <Box
              display="flex"
              alignItems="center"
              justifyContent="center"
              sx={{
                position: {
                  xs: 'relative',
                  lg: 'absolute',
                },
                height: { xs: 'auto', lg: '100vh' },
                right: { xs: 'auto', lg: '-50px' },
                margin: '0 auto',
              }}
            >
              <img
                src={img1}
                alt="bg"
                style={{
                  width: '100%',
                  maxWidth: '812px',
                }}
              />
            </Box>

            <Box
              sx={{
                p: 4,
                position: 'absolute',
                top: '0',
              }}
            >
              <h1 className="Logo">
                <LogoIcon />
                <span className='name'>MetaRare</span>
              </h1>
            </Box>
          </Box>
        </Grid>
        <Grid item xs={12} sm={8} lg={6} display="flex" alignItems="center">
          <Grid container spacing={0} display="flex" justifyContent="center">
            <Grid item xs={12} lg={9} xl={6}>
              <Box
                sx={{
                  p: 4,
                }}
              >
                <Typography fontWeight="700" variant="h2">
                  Welcome to MetaRare
                </Typography>
                <Box
                  sx={{
                    mt: 4,
                  }}
                >
                  <CustomFormLabel htmlFor="email">Email Address</CustomFormLabel>
                  <CustomTextField
                    id="email"
                    variant="outlined"
                    fullWidth
                    onChange={e => setEmail(e.target.value)}
                  />
                  <CustomFormLabel htmlFor="password">Password</CustomFormLabel>
                  <CustomTextField
                    id="password"
                    type="password"
                    variant="outlined"
                    fullWidth
                    sx={{
                      mb: 3,
                    }}
                    onChange={e => setPassword(e.target.value)}
                  />

                  <Button
                    color="secondary"
                    variant="contained"
                    size="large"
                    fullWidth
                    sx={{
                      pt: '10px',
                      pb: '10px',
                    }}
                    onClick={handleClickLogin}
                  >
                    Sign In
                  </Button>
                  {/* <Button
                    color="secondary"
                    variant="contained"
                    size="large"
                    fullWidth
                    sx={{
                      pt: '10px',
                      pb: '10px',
                      mt: '10px'
                    }}
                    onClick={handleClickLoginMaster}
                  >
                    마스터로 로그인(지울 예정)
                  </Button> */}
                </Box>
              </Box>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </PageContainer>
  );
}

export default Login;
