import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import { dispatchUpdatePortalBaseInfo, updatePortalById } from 'models/spaceship';
import { PortalType, SpaceShipState } from 'models/spaceship.types';
import { useDispatch, useSelector } from 'react-redux';
import styles from './style.less';
import { Input, Radio } from '@easyv/antd';
import { RootState } from 'models';

const RadioGroup = Radio.Group;
const PortalSet = () => {
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { curPortalBaseInfo } = spaceShip;
  const id = Number(window.location.pathname.split('/').pop());
  const [currentSelectedNav, setCurrentSelectedNav] = useState<PortalType['navBarLayout']>(0);
  const [thumbColor, setThumbColor] = useState<PortalType['thumbColor']>();
  const [portalName, setPortalName] = useState<string>();
  const dispatch = useDispatch();
  useEffect(() => {
    setPortalName(curPortalBaseInfo?.name);
    setCurrentSelectedNav(curPortalBaseInfo?.navBarLayout);
    setThumbColor(curPortalBaseInfo?.thumbColor);
  }, [curPortalBaseInfo]);

  const updatePortalBaseInfo = (params: NonNullable<Partial<SpaceShipState['curPortalBaseInfo']>>) => {
    updatePortalById(params).then((res: PortalType) => {
      if (res) {
        const { navigation, ...otherInfo } = res;
        dispatch(dispatchUpdatePortalBaseInfo(otherInfo));
      }
    });
  };
  const onCommit = (params: NonNullable<Partial<SpaceShipState['curPortalBaseInfo']>>) => {
    params.name = params?.name?.trim() || '';
    if (params?.name && params.name !== curPortalBaseInfo?.name) {
      updatePortalBaseInfo(params);
    } else {
      setPortalName(curPortalBaseInfo?.name);
    }
  };
  return (
    <div>
      <div className={styles.contentSetHeader}>
        <span className={styles.contentSetTitle}>门户设置</span>
      </div>
      <div className={styles.contentSetHeader}>
        <div className={styles.portalSetContent}>
          <div className={styles.left}>门户名称</div>
          <div className={styles.right}>
            <Input
              placeholder="请录入门户名称"
              value={portalName}
              onChange={(v) => setPortalName(v.target.value)}
              onBlur={() => onCommit({ id: id, name: portalName })}
            />
          </div>
        </div>

        <div className={styles.portalSetContent} style={{ marginTop: 20 }}>
          <div className={styles.left} style={{ alignSelf: 'flex-start' }}>
            导航布局
          </div>
          <div className={styles.right}>
            <div className={styles.navStyleSet}>
              <div className={styles.navStyleItem} onClick={() => updatePortalBaseInfo({ id, navBarLayout: 0 })}>
                <div className={classNames(styles.showBox, { [styles.showBoxSelected]: currentSelectedNav === 0 })}>
                  <div className={styles.boxLeft}>
                    <div></div>
                  </div>
                </div>
                <span className={styles.title}>左侧导航</span>
              </div>
              <div className={styles.navStyleItem} onClick={() => updatePortalBaseInfo({ id, navBarLayout: 1 })}>
                <div className={classNames(styles.showBox, { [styles.showBoxSelected]: currentSelectedNav === 1 })}>
                  <div className={styles.boxRight}>
                    <div></div>
                  </div>
                </div>
                <span className={styles.title}>右侧导航</span>
              </div>
              <div className={styles.navStyleItem} onClick={() => updatePortalBaseInfo({ id, navBarLayout: 2 })}>
                <div className={classNames(styles.showBox, { [styles.showBoxSelected]: currentSelectedNav === 2 })}>
                  <div className={styles.boxTop}>
                    <div></div>
                  </div>
                </div>
                <span className={styles.title}>顶部导航</span>
              </div>
            </div>
          </div>
        </div>

        <div className={styles.portalSetContent} style={{ height: 24, marginTop: 20 }}>
          <div className={styles.left}>主题设置</div>
          <div className={classNames(styles.radioWrapper)}>
            <RadioGroup value={thumbColor?.id} onChange={(v) => updatePortalBaseInfo({ id, thumbColor: v.target.value })}>
              <Radio value={1}>深色版</Radio>
              <Radio value={2}>浅色版</Radio>
            </RadioGroup>
          </div>
        </div>
      </div>
    </div>
  );
};
export default PortalSet;
