import clsx from 'clsx';
import LogoBannerH from '@/assets/logo-baner-h.png';

import { Beian } from '@/modules/beian/beian';
import { useUserStore } from '../store';
import { useShallow } from 'zustand/shallow';
import { useEffect } from 'react';
type Props = {
  children?: React.ReactNode;
  className?: string;
};
export const Layout = (props: Props) => {
  return (
    <div
      className={clsx(
        'w-full h-full sm:bg-amber-100  flex sm:items-center sm:justify-center justify-normal items-start relative overflow-hidden',
        props?.className,
      )}>
      <div className='w-full h-full overflow-scroll sm:overflow-hidden sm:scrollbar flex sm:items-center sm:justify-center'>{props.children}</div>
    </div>
  );
};

export const MainLayout = (props: Props) => {
  const config = useUserStore((state) => state.config);
  return (
    <div
      className={clsx(
        'login-main w-[450px] min-h-[660px] bg-white mt-10 sm:mt-0 sm:shadow-lg rounded-md flex items-center flex-col relative ',
        props?.className,
      )}>
      {props.children}
      <p className='mt-5 text-xs text-center text-[#e69c36]'>
        登录即表示同意 <span className='font-medium text-[#e69c36]'>服务条款</span> 和 <span className='font-medium text-[#e69c36]'>隐私政策</span>
      </p>
      <Beian className=' mb-4' text={config?.beian} />
    </div>
  );
};

export const LoginWrapper = (props: Props) => {
  const config = useUserStore((state) => state.config);
  const loginWay = config?.loginWay || ['account'];
  const store = useUserStore(
    useShallow((state) => {
      return {
        loginByWechat: state.loginByWechat,
      };
    }),
  );
  const checkWechat = () => {
    const url = new URL(window.location.href);
    const code = url.searchParams.get('code');
    const state = url.searchParams.get('state');
    if (code && state) {
      store.loginByWechat(code);
    }
  };
  useEffect(() => {
    checkWechat();
  }, []);
  return (
    <Layout>
      <MainLayout className=''>
        <div
          className='mt-4'
          style={{
            width: '90px',
            height: '90px',
            overflow: 'hidden',
            ...config?.logoStyle,
          }}>
          <img src={config?.logo || LogoBannerH} />
        </div>
        <div className='mt-4 text-[#F39800] font-bold text-xl'>欢迎回来</div>
        {loginWay.length > 1 && <div className='text-sm text-yellow-400 mt-2'>请选择登陆方式</div>}
        <div>{props.children}</div>
      </MainLayout>
    </Layout>
  );
};