"use client"
import LoginForm from "@/components/auth/form/login-form";
import { ServiceViewSettings } from "@/types/serviceAdmin";
import { IMAGE_PATH, OPTION_LOGIN } from "@/lib/appConstant";
import { makeStyles } from "tss-react/mui";
import { useAppSelector } from "@/lib/redux/hooks";
import { getAccountType, getPageLogo } from "@/lib/redux/features/serviceAdmin";
import { getAuthIsLoading } from "@/lib/redux/features/auth";
import AppLoading from "../ui/loading";
type PropsType = {
  viewSettings?: ServiceViewSettings;
};

const useStyle = makeStyles<{ accountType?: string }>()((
  theme,
  { accountType }
) => {
  return (
    {
      container: {
        width: '100vw',
        height: '100%',
        maxWidth: accountType === OPTION_LOGIN.GAKKEN_ID ? '100%' : '400px',
        maxHeight: accountType === OPTION_LOGIN.GAKKEN_ID ? '100%' : '80%',
        padding: '15px',
        margin: 'auto',
        display: 'flex',
        flexWrap: 'nowrap',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        '& input': {
          minHeight: 'unset!important',
          fontSize: '1rem',
          borderColor: '#ced4da',
        },
        '& input:focus': {
          borderColor: '#80bdff',
          outline: 0,
          boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)!important'
        },
        '& input:hover': {
          borderColor: '#ced4da'
        },
        '& .card': {
          height: '100%'
        }
      },
      logoBox: {
        display: 'flex',
        marginBottom: '24px',
        justifyContent: 'center'
      },
      logo: {
        maxWidth: '100%',
        maxHeight: '160px',
      },
    }
  );
});

export default function LoginPageRender(props: PropsType) {

  const pageLogo = useAppSelector(getPageLogo);
  const accountType = useAppSelector(getAccountType);
  const authLoading = useAppSelector(getAuthIsLoading);

  const urlUpload = process.env.NEXT_PUBLIC_UPLOAD_PATH + '/';
 
  const { classes } = useStyle({ accountType });

  return (
    <>
      <div className={`${classes.container}`}>
        {/* Render banner */}
        {
          authLoading && <AppLoading/>
        }

        <div className={`${classes.logoBox} max-w-[400px]`} style={{ display: authLoading ? 'none' : undefined }}>
          {
            pageLogo && pageLogo !== '' && pageLogo !== 'null' &&
            <img className={`${classes.logo}`} src={`${urlUpload}${IMAGE_PATH.LOGO}${pageLogo}`} />
          }
        </div>
        {/* Render Login Form */}
        <div className="max-w-[400px] w-full p-[1.25rem] border border-gray-200 shadow bg-white" style={{ display: authLoading ? 'none' : undefined }}>
          <LoginForm />
        </div>
      </div>
    </>
  );
}