import React, { useEffect, useState } from 'react';
import { VideoJS } from '../VideoJS/index.jsx';
import H5Frame from '../H5Frame/index';

import { Dropdown, Menu } from 'antd';

function Page(props: IPage) {
  const {
    keys,
    index,
    active,
    componentList,
    pageMenu,
    pageEvent,
    wh,
    styleConfig,
    backgroundSize
  } = props;

  const [newComponentList, setComponentList] = useState([]); //元件的数据
  useEffect(() => {
    //有可能是成组的数据,转成一维数组
    let oldData = [];
    oldData = oneDimensionalChange(componentList, oldData);
    setComponentList(oldData);
  }, [componentList]);
  const oneDimensionalChange = (
    list: IComponentList[],
    oldData: IComponentList[]
  ) => {
    Array.isArray(list) &&
      list?.length > 0 &&
      list?.forEach((item) => {
        if (item?.elementInfo) {
          oldData.push({
            key: item?.key,
            selected: item?.selected,
            status: item?.status,
            layerIndex: item?.layerIndex,
            elementIndex: item?.elementIndex,
            ...item,
            ...item?.elementInfo
          });
        } else if (item?.children && item?.children?.length > 0) {
          oneDimensionalChange(item.children, oldData);
        }
      });
    return oldData;
  };

  //page的点击事件和右键事件
  const clickPage = (type: string) => {
    pageEvent?.({ key: keys, index: index, styleConfig: styleConfig }, type);
  };

  //菜单的点击事件
  const clickMenu = ({ key }) => {
    pageEvent?.({ key: keys, index: index, menuKey: key }, 'menuClick');
  };

  //渲染菜单
  const menu = () => {
    return <Menu items={pageMenu} onClick={clickMenu} />;
  };

  //渲染元素
  const renderElement = (item, index) => {
    if (item?.type === 'video') {
      return (
        <div style={{ pointerEvents: 'none',width: item?.width, height: item?.height }}>
          <VideoJS
            width={item?.width}
            height={item?.height}
            options={item?.videoOptions}
          />
        </div>
      );
    } else if (item?.type === 'h5Frame') {
      return <H5Frame options={item?.h5FrameOptions} />;
    } else {
      return item?.element;
    }
  };
  return (
    <Dropdown
      overlay={menu}
      trigger={['contextMenu']}
      overlayClassName="zl-large-screen-page-item-drop-down"
    >
      <div
        className="zl-large-screen-page-item"
        onContextMenu={() => {
          clickPage('ContextMenu');
        }}
        onClick={() => {
          clickPage('click');
        }}
        style={{
          height: backgroundSize?.height * (144 / backgroundSize?.width)
        }}
      >
        <span className="zl-large-screen-page-index">{index}</span>
        <div
          style={{
            width: backgroundSize?.width,
            height: backgroundSize?.height,
            transform: `scale(${144 / backgroundSize?.width})`,
            transformOrigin: 'top left',
            background: styleConfig?.backgroundData?.backgroundColor
          }}
          className="zl-large-screen-page-thumbnail"
        >
          <div
            className={`${active ? 'zl-large-screen-pae-active' : ''}`}
            style={
              active
                ? {
                    border: `${
                      1 / (144 / backgroundSize?.width)
                    }px solid #526cfd`
                  }
                : {
                    border: `${
                      1 / (144 / backgroundSize?.width)
                    }px solid #e5e5e5`
                  }
            }
          >
            {newComponentList.length > 0 &&
              newComponentList.map((item) => {
                return (
                  <div
                    key={item?.key}
                    style={{
                      width: item?.width,
                      height: item?.height,
                      position: 'absolute',
                      left: item?.x,
                      top: item?.y,
                      zIndex: item?.elementIndex,
                      overflow: 'hidden'
                    }}
                  >
                    {renderElement(item, index)}
                  </div>
                );
              })}
          </div>
        </div>
      </div>
    </Dropdown>
  );
}
export default Page;

export interface IPage {
  keys: string;
  index: number;
  active?: boolean;
  componentList?: IComponentList[];
  pageMenu?: IPageMenu[];
  pageEvent?: Function;
  wh: IBackgroundData;
  styleConfig?: IBackgroundData;
  backgroundSize: IBackgroundSize;
}

export interface IBackgroundData {
  [key: string]: any;
}

export interface IComponentList {
  key: number | string;
  layerIndex: string;
  elementIndex: number;
  type?: string;
  title?: string;
  icon?: string;
  selected?: boolean;
  ratio?: boolean;
  isShow?: boolean;
  isLock?: boolean;
  menuVisible?: boolean;
  boxMenuVisible?: boolean;
  elementInfo?: IElement;
  status?: string;
  children?: IComponentList[];
}

export interface IElement {
  width: number;
  height: number;
  x: number;
  y: number;
  chartType: string;
  element: React.ReactNode;
  keepRatio: boolean;
  key: number | string;
}

export interface IPageMenu {
  key?: string;
  disabled?: boolean;
  label?: string;
}

export interface IValue {
  keys: string;
  pageIndex: number;
}

export interface IBackgroundSize {
  width: number;
  height: number;
}