import { FormProvider, useForm } from 'react-hook-form';
import { BrowserRouter } from 'react-router-dom';

import { Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react';

import humandLogo from '../../../../assets/HUMAND-Blue.svg';
import loginBanner from '../../../../assets/login-banner.png';
import InstanceCard from '../components/InstanceCard';
import LoginLayout from '../components/LoginLayout';

import SSOButton from './components/SSOButton';
import useSelectIntanceDrawer from './hooks/useSelectIntanceDrawer';
import { type LoginFormProps } from './types';
import LoginForm from '.';

const meta: Meta<typeof LoginForm> = {
  title: 'Composed Components/Auth/LoginForm',
  component: LoginForm,
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<typeof LoginForm>;

const baseFormConfig: LoginFormProps['formConfig'] = {
  email: {
    rules: {
      required: 'El usuario es requerido',
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: 'El usuario no es válido',
      },
    },
  },
  password: {
    rules: {
      required: 'La contraseña es requerida',
      minLength: {
        value: 6,
        message: 'La contraseña debe tener al menos 6 caracteres',
      },
    },
  },
};

const baseCallbacks: LoginFormProps['callbacks'] = {
  onSubmit: e => {
    e.preventDefault();
  },
  onRecoverPassword: () => {},
  onSelectAnother: () => {},
};

const baseSSO: LoginFormProps['sso'] = {
  azureButton: (
    <SSOButton
      type="Microsoft"
      onClick={() => {}}
    />
  ),
  googleButton: (
    <SSOButton
      type="Google"
      onClick={() => {}}
    />
  ),
  oktaButton: (
    <SSOButton
      type="Okta"
      onClick={() => {}}
    />
  ),
};

export const Default: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        email: '',
        password: '',
      },
    });

    const instances = [
      {
        id: 1,
        name: 'Techint Engineering & Construction',
        color: '#000000',
        logo: humandLogo,
        samlURI: 'https://saml.humand.co',
        userHasEmail: true,
        forceOTP: false,
        otpAfterRegularLogin: false,
      },
      {
        id: 2,
        name: 'Humand',
        color: '#000000',
        logo: humandLogo,
        samlURI: 'https://saml.humand.co',
        userHasEmail: true,
        forceOTP: false,
        otpAfterRegularLogin: false,
      },
    ];

    const selectedInstance: typeof instances = [];

    const {
      drawer: selectInstanceDrawer,
      showDrawer: showSelectInstanceDrawer,
    } = useSelectIntanceDrawer({
      onClose: () => {},
      loading: false,
      instances,
      onSelectInstance: () => {},
      searchProps: {
        query: '',
        setQuery: () => {},
      },
    });

    return (
      <>
        {selectInstanceDrawer}
        <Stack
          sx={{
            width: '100%',
            height: '100%',
            p: 5,
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <LoginLayout
            banner={{ src: loginBanner }}
            showBackdrop={false}
          >
            <BrowserRouter>
              <FormProvider {...form}>
                <Stack
                  sx={{
                    alignItems: 'center',
                    height: '100vh',
                    justifyContent: 'center',
                    flex: 1,
                  }}
                >
                  <LoginForm
                    title={
                      <Typography
                        variant="globalXL"
                        fontWeight="fontWeightSemiBold"
                        color={theme => theme.palette.new.text.neutral.default}
                      >
                        Inicia sesión en el panel del administrador
                      </Typography>
                    }
                    isSubmitting={false}
                    formConfig={baseFormConfig}
                    hasInstanceSelected={selectedInstance.length > 0}
                    showAnotherInstanceButton={
                      selectedInstance.length > 0 && instances.length > 1
                    }
                    callbacks={{
                      ...baseCallbacks,
                      onSubmit: e => {
                        e.preventDefault();
                        showSelectInstanceDrawer(true);
                      },
                    }}
                    sso={baseSSO}
                  />
                </Stack>
              </FormProvider>
            </BrowserRouter>
          </LoginLayout>
        </Stack>
      </>
    );
  },
};

export const WithInstanceSelected: Story = {
  render: () => {
    const form = useForm({
      defaultValues: {
        email: 'email@humand.co',
        password: '',
      },
    });

    const instanceSelected = {
      id: 1,
      name: 'Humand',
      logo: humandLogo,
    };

    const instances = [
      {
        id: 1,
        name: 'Humand',
        color: '#000000',
        logo: humandLogo,
        samlURI: 'https://saml.humand.co',
        userHasEmail: true,
        forceOTP: false,
        otpAfterRegularLogin: false,
      },
      {
        id: 2,
        name: 'Humand',
        color: '#000000',
        logo: humandLogo,
        samlURI: 'https://saml.humand.co',
        userHasEmail: true,
        forceOTP: false,
        otpAfterRegularLogin: false,
      },
    ];

    return (
      <Stack
        sx={{
          width: '100%',
          height: '100%',
          p: 5,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <LoginLayout
          banner={{ src: loginBanner }}
          showBackdrop={false}
        >
          <BrowserRouter>
            <FormProvider {...form}>
              <Stack
                sx={{
                  alignItems: 'center',
                  height: '100vh',
                  justifyContent: 'center',
                  flex: 1,
                }}
              >
                <LoginForm
                  title={
                    <InstanceCard
                      name={instanceSelected?.name ?? ''}
                      logo={instanceSelected?.logo ?? ''}
                    />
                  }
                  isSubmitting={false}
                  formConfig={baseFormConfig}
                  hasInstanceSelected={!!instanceSelected}
                  showAnotherInstanceButton={
                    !!instanceSelected && instances.length > 1
                  }
                  callbacks={baseCallbacks}
                  sso={baseSSO}
                />
              </Stack>
            </FormProvider>
          </BrowserRouter>
        </LoginLayout>
      </Stack>
    );
  },
};