import EasyvButton from '@/components/EasyvButton';
import EasyvNoData from '@/components/EasyvNoData';
import message from '@/components/message';
import Space from '@/components/Space';
import { RootState } from '@/models';
import { getScreenDataByPasswordAndId } from '@/models/screen-detail';
import { Input } from '@easyv/antd';
import React, { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styles from './reference-panel-verification.less';

interface Props {
  width?: number;
  height?: number;
  screenId: number;
  userSetPassword?: string;
}

const ReferencePanelVerification = (props: Props) => {
  const { width, height, screenId, userSetPassword } = props;
  const dispatch = useDispatch();
  const [password, setPassword] = useState(null);
  const screensStatus = useSelector<RootState>((state) => state.screensStatus) || {};
  useEffect(() => {
    if (!screenId) return;
    if (!!userSetPassword) {
      dispatch(getScreenDataByPasswordAndId(userSetPassword, screenId, false));
    }
  }, []);

  const onSubmit = useCallback(() => {
    if (!screenId) return;
    dispatch(
      getScreenDataByPasswordAndId(password, screenId, false, () => {
        message.error('密码错误');
      }),
    );
  }, [screenId, password]);
  // TODO 暂时把-2归结到大屏不存在或未发布这种情况，后续统一处理大屏未发布、被删除、密码错误、需要token这四种情况
  return (
    <div className={styles.container} style={{ width, height }}>
      {screensStatus[`${screenId}`] === -1 ? (
        <>
          <div className={styles.iconContainer}></div>
          <div className={styles.textContainer}>应用已加密，请输入密码</div>
          <Space>
            <Input
              placeholder="请输入应用密码"
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
              }}
            />
            <EasyvButton theme="primary" onClick={onSubmit}>
              确认
            </EasyvButton>
          </Space>
        </>
      ) : [-2, 404, -404].includes(screensStatus[`${screenId}`]) ? (
        <EasyvNoData
          text={
            <>
              <p className={styles.emptyTitle}>可视化应用未发布或已删除</p>
              <p className={styles.emptyText}>
                您访问的可视化应用未发布或已被删除，请确认访问的可视化应用是否存在且已发布
              </p>
            </>
          }
        />
      ) : null}
    </div>
  );
};

export default ReferencePanelVerification;
