'use client';

// import { Form, type ItemGroup, SelectWithImg, SliderWithInput } from '@lobehub/ui';
import isEqual from 'fast-deep-equal';
import { Monitor, Moon, Sun } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import {Form, Select} from "antd";
import {EditFilled} from "@ant-design/icons";

import { useSyncSettings } from '@/app/(main)/settings/hooks/useSyncSettings';
import { FORM_STYLE } from '@/const/layoutTokens';
import { imageUrl } from '@/const/url';
import AvatarWithUpload from '@/features/AvatarWithUpload';
import { Locales, localeOptions } from '@/locales/resources';
import { useUserStore } from '@/store/user';
import {
  authSelectors,
  settingsSelectors,
  userGeneralSettingsSelectors,
} from '@/store/user/selectors';
import { switchLang } from '@/utils/client/switchLang';

import { ThemeSwatchesNeutral, ThemeSwatchesPrimary } from './ThemeSwatches';
import {createStyles} from "antd-style";

// type SettingItemGroup = ItemGroup;

const useStyles = createStyles(({ css, token }) => ({
  cricle: css`
    width: 8px;
    height: 8px;
    border-radius: 8px;
    display: inline-block;
    margin-right: 15px;
    background-color: #4F4F4F;
  `,
  onlyDiv: css`
    padding: 15px 40px;
  `,
  leftText: css`
    width: 200px;
    font-size: 18px;
    color: #333;
    display: inline-block
  `,
  leftDir: css`
    color: #999999;
    font-size: 16px;
    display: inline-block;
    margin-left: 5px;
  `,
  rightText: css`
    width: calc(100% - 215px);
    text-align: right;
    color: #333333;
    font-size: 16px;
    display: inline-block;
    margin-right: 15px;
  `,
  childrenLeftText: css`
    margin-left: 50px;
  `,
  childrenRightText: css`
    width: calc(100% - 265px);
  `,
  childrenlangText: css`
    margin-left: 50px;
    width: calc(100% - 65px);
    text-align: left;
  `,
  topTitle: css`
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  `,
  topEdit: css`
    display: inline-block;
    text-align: center;
    width: 24px;
    height: 24px;
    background-color: #AFC1FF;
    color: #fff;
   `,
}))

const Theme = memo(() => {
  const { t } = useTranslation('setting');
  const router = useRouter();
  const { styles, cx } = useStyles()
  const [form] = Form.useForm();
  // const settings = useUserStore(settingsSelectors.currentSettings, isEqual);
  // const themeMode = useUserStore(userGeneralSettingsSelectors.currentThemeMode);
  // const [setThemeMode, setSettings, enableAuth] = useUserStore((s) => [
  //   s.switchThemeMode,
  //   s.setSettings,
  //   authSelectors.enabledAuth(s),
  // ]);

  // useSyncSettings(form);
  //
  // const handleLangChange = (value: Locales) => {
  //   switchLang(value);
  //   router.refresh();
  // };

  // const theme: SettingItemGroup = {
  //   children: [
  //     {
  //       children: <AvatarWithUpload />,
  //       hidden: enableAuth,
  //       label: t('settingTheme.avatar.title'),
  //       minWidth: undefined,
  //     },
  //     {
  //       children: (
  //         <SelectWithImg
  //           height={60}
  //           onChange={setThemeMode}
  //           options={[
  //             {
  //               icon: Sun,
  //               img: imageUrl('theme_light.webp'),
  //               label: t('settingTheme.themeMode.light'),
  //               value: 'light',
  //             },
  //             {
  //               icon: Moon,
  //               img: imageUrl('theme_dark.webp'),
  //               label: t('settingTheme.themeMode.dark'),
  //               value: 'dark',
  //             },
  //             {
  //               icon: Monitor,
  //               img: imageUrl('theme_auto.webp'),
  //               label: t('settingTheme.themeMode.auto'),
  //               value: 'auto',
  //             },
  //           ]}
  //           unoptimized={false}
  //           value={themeMode}
  //           width={100}
  //         />
  //       ),
  //       label: t('settingTheme.themeMode.title'),
  //       minWidth: undefined,
  //     },
  //     {
  //       children: (
  //         <Select
  //           onChange={handleLangChange}
  //           options={[{ label: t('settingTheme.lang.autoMode'), value: 'auto' }, ...localeOptions]}
  //         />
  //       ),
  //       label: t('settingTheme.lang.title'),
  //       name: ['general', 'language'],
  //     },
  //     {
  //       children: (
  //         <SliderWithInput
  //           marks={{
  //             12: {
  //               label: 'A',
  //               style: {
  //                 fontSize: 12,
  //                 marginTop: 4,
  //               },
  //             },
  //             14: {
  //               label: t('settingTheme.fontSize.marks.normal'),
  //               style: {
  //                 fontSize: 14,
  //                 marginTop: 4,
  //               },
  //             },
  //             18: {
  //               label: 'A',
  //               style: {
  //                 fontSize: 18,
  //                 marginTop: 4,
  //               },
  //             },
  //           }}
  //           max={18}
  //           min={12}
  //           step={1}
  //         />
  //       ),
  //       desc: t('settingTheme.fontSize.desc'),
  //       label: t('settingTheme.fontSize.title'),
  //       name: ['general', 'fontSize'],
  //     },
  //     {
  //       children: <ThemeSwatchesPrimary />,
  //       desc: t('settingTheme.primaryColor.desc'),
  //       label: t('settingTheme.primaryColor.title'),
  //       minWidth: undefined,
  //     },
  //     {
  //       children: <ThemeSwatchesNeutral />,
  //       desc: t('settingTheme.neutralColor.desc'),
  //       label: t('settingTheme.neutralColor.title'),
  //       minWidth: undefined,
  //     },
  //   ],
  //   title: t('settingTheme.title'),
  // };

  return (
    // <Form
    //   form={form}
    //   initialValues={settings}
    //   items={[theme]}
    //   itemsType={'group'}
    //   onValuesChange={setSettings}
    //   variant={'pure'}
    //   {...FORM_STYLE}
    // />
    <Form form={form}>
      <div className={cx(styles.onlyDiv, styles.topTitle)}>
        <div className={cx(styles.leftText)}>数字人形象</div>
        <div className={styles.rightText}><div className={cx(styles.topEdit)}><EditFilled /></div></div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText)}><span className={cx(styles.cricle)}></span>角色<span className={cx(styles.leftDir)}>/Role</span></div>
        <div className={cx(styles.rightText)}>老师</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText)}><span className={cx(styles.cricle)}></span>基本设定<span className={cx(styles.leftDir)}>/Profile</span></div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText, styles.childrenLeftText)}>创建者<span className={cx(styles.leftDir)}>/Author</span></div>
        <div className={cx(styles.rightText, styles.childrenRightText)}>adoadadu</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText, styles.childrenLeftText)}>版本<span className={cx(styles.leftDir)}>/Version</span></div>
        <div className={cx(styles.rightText, styles.childrenRightText)}>1.02</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText, styles.childrenLeftText)}>语言<span className={cx(styles.leftDir)}>/Language</span></div>
        <div className={cx(styles.rightText, styles.childrenRightText)}>中文</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText, styles.childrenLeftText)}>描述<span className={cx(styles.leftDir)}>/Description</span></div>
        <div className={cx(styles.rightText, styles.childrenRightText)}>这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText)}><span className={cx(styles.cricle)}></span>背景<span className={cx(styles.leftDir)}>/Background</span></div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.rightText, styles.childrenlangText)}>这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段，这是一段描述文字，这是一段描述文字，这是一段</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText)}><span className={cx(styles.cricle)}></span>目标<span className={cx(styles.leftDir)}>/Goals</span></div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.rightText, styles.childrenlangText)}>这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段，这是一段描述文字，这是一段描述文字，这是一段</div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.leftText)}><span className={cx(styles.cricle)}></span>规则<span className={cx(styles.leftDir)}>/Rules</span></div>
      </div>
      <div className={cx(styles.onlyDiv)}>
        <div className={cx(styles.rightText, styles.childrenlangText)}>这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段这是一段描述文字，这是一段描述文字，这是一段描述文字，这是一段，这是一段描述文字，这是一段描述文字，这是一段</div>
      </div>
    </Form>
  );
});

export default Theme;
