import { Form, Formik } from 'formik';
import { Typography, Link, Container } from '@krakentech/coral';
import {
    Login,
    LoginButton,
    LoginEmailInput,
    LoginForm,
    LoginFormCard,
    LoginFormCards,
    LoginMagicLink,
    LoginPasswordInput,
    LoginTitle,
    LoginLookingAwayAnimation,
} from '@krakentech/coral-organisms';
 
import * as Yup from 'yup';
 
type LoginFormValues = {
    email: string;
    password: string;
};
 
const initialValues: LoginFormValues = {
    email: '',
    password: '',
};
 
<Container
    component="section"
    marginX="auto"
    paddingX="sm"
    paddingY="xl"
    maxWidth="md"
>
    <Login>
        <LoginLookingAwayAnimation />
 
        <LoginTitle />
 
        <Formik
            initialValues={initialValues}
            onSubmit={(values: LoginFormValues) => console.log(values)}
            validationSchema={Yup.object().shape({
                email: Yup.string()
                    .email('Please enter valid email')
                    .required('Pleae enter your email'),
                password: Yup.string()
                    .required('Please enter the password')
                    .test(
                        'length',
                        'The password must be at least 8 characters',
                        (value: string) => !!value && value.length > 8
                    ),
            })}
        >
            <Form method="post" style={{ width: '100%' }}>
                <LoginForm>
                    <LoginEmailInput label="Email address" />
 
                    <LoginPasswordInput label="Password" />
 
                    <LoginMagicLink
                        linkHref="#"
                        linkText="Send me a magic link"
                    />
 
                    <LoginButton />
                </LoginForm>
            </Form>
        </Formik>
 
        <LoginFormCards>
            <LoginFormCard>
                <Typography textAlign="center" textStyle="h5" component="p">
                    Not a customer yet?
                </Typography>
                <Typography textAlign="center">
                    <Link href="#">Start your switch now</Link>
                </Typography>
            </LoginFormCard>
 
            <LoginFormCard>
                <Typography textAlign="center" textStyle="h5" component="p">
                    Don&apos;t have a password?
                </Typography>
                <Typography textAlign="center">
                    <Link href="#">Click to receive email</Link>
                </Typography>
            </LoginFormCard>
        </LoginFormCards>
    </Login>
</Container>;

const { showPassword, setShowPassword } = Login.useLoginContext();