import { Card, CardBody } from '@heroui/card';
import { Tab, Tabs } from '@heroui/tabs';
import clsx from 'clsx';
import { useMediaQuery } from 'react-responsive';
import { useNavigate, useSearchParams } from 'react-router-dom';

import ChangePasswordCard from './change_password';
import LoginConfigCard from './login';
import OneBotConfigCard from './onebot';
import ServerConfigCard from './server';
import ThemeConfigCard from './theme';
import WebUIConfigCard from './webui';

export interface ConfigPageProps {
  children?: React.ReactNode
  size?: 'sm' | 'md' | 'lg'
}

const ConfingPageItem: React.FC<ConfigPageProps> = ({
  children,
  size = 'md',
}) => {
  return (
    <Card className='bg-opacity-50 backdrop-blur-sm'>
      <CardBody className='items-center py-5'>
        <div
          className={clsx('max-w-full flex flex-col gap-2', {
            'w-72': size === 'sm',
            'w-96': size === 'md',
            'w-[32rem]': size === 'lg',
          })}
        >
          {children}
        </div>
      </CardBody>
    </Card>
  );
};

export default function ConfigPage () {
  const isMediumUp = useMediaQuery({ minWidth: 768 });
  const navigate = useNavigate();
  const search = useSearchParams({
    tab: 'onebot',
  })[0];
  const tab = search.get('tab') ?? 'onebot';

  return (
    <section className='w-[1000px] max-w-full md:mx-auto gap-4 py-8 px-2 md:py-10'>
      <Tabs
        aria-label='config tab'
        fullWidth
        className='w-full'
        isVertical={isMediumUp}
        selectedKey={tab}
        onSelectionChange={(key) => {
          navigate(`/config?tab=${key}`);
        }}
        classNames={{
          tabList: 'sticky flex top-14 bg-opacity-50 backdrop-blur-sm',
          panel: 'w-full relative',
          base: 'md:!w-auto flex-grow-0 flex-shrink-0 mr-0',
          cursor: 'bg-opacity-60 backdrop-blur-sm',
        }}
      >
        <Tab title='OneBot配置' key='onebot'>
          <ConfingPageItem>
            <OneBotConfigCard />
          </ConfingPageItem>
        </Tab>
        <Tab title='服务器配置' key='server'>
          <ConfingPageItem>
            <ServerConfigCard />
          </ConfingPageItem>
        </Tab>
        <Tab title='WebUI配置' key='webui'>
          <ConfingPageItem>
            <WebUIConfigCard />
          </ConfingPageItem>
        </Tab>
        <Tab title='登录配置' key='login'>
          <ConfingPageItem>
            <LoginConfigCard />
          </ConfingPageItem>
        </Tab>
        <Tab title='修改密码' key='token'>
          <ConfingPageItem>
            <ChangePasswordCard />
          </ConfingPageItem>
        </Tab>

        <Tab title='主题配置' key='theme'>
          <ConfingPageItem size='lg'>
            <ThemeConfigCard />
          </ConfingPageItem>
        </Tab>
      </Tabs>
    </section>
  );
}