import React, { useState, useEffect, useMemo } from 'react';
import { Row,Col } from "antd";
import { computedCuurentGrid } from "../utils";
import IconFont from '../../../themeComponents/IconFont';
import './index.less';

/**
 * 带删除的盒子
 * @param props
 * @constructor
 */
const BoxDel = (props) => {
  const [show, setShow] = useState(false);
  const { style = {}, className = '', ...params } = props;
  const styles = {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,.2)',
    display: show ? 'flex' : 'none',
  };
  const iconBoxStyle = {
    style: {
      position: 'absolute',
      top: 'calc(100% / 2 /2)',
      left: 'calc(100% / 2 / 2)',
      overflow: 'hidden',
      width: 'calc(100% /2)',
      height: 'calc(100% /2)',
      borderRadius: '50%',
      backgroundColor: 'rgb(255, 255, 255)',
    },
  };
  const iconStyle = {
    style: {
      marginTop: 'calc(100% /2 /2)',
    },
  };
  const toggleShow = () => setShow(!show);
  return (
    <div className={`lm-c-normol-box ${className}`} style={{ ...style, position: 'relative' }} {...params} onMouseOver={() => toggleShow()} onMouseOut={() => toggleShow()}>
      <div style={{ ...style, ...styles }}>
        <div {...iconBoxStyle}>
          <IconFont type="icon-XL_Box_Delete" {...iconStyle} onClick={() => props.delImgHandel && props.delImgHandel()} />
        </div>
      </div>
      {props.children}
    </div>
  );
};

/**
 * @普通继承父级宽高的盒子
 * @param {*} props
 */
const Box = (props) => {
  const { className = '', style = {}, children, ...params } = props;
  return (
    <div className={`lm-c-normol-box ${className}`} {...params} style={style}>
      {children}
    </div>
  );
};

/**
 * @带小标题和操作icon的盒子
 * @param {*} props
 */
const BoxDesc = (props) => {
  const { className = '', title, icon, operationExt, iconTest, wrapStyle, children, ...params } = props;
  return (
    <Row className={`lm-c-box-desc ${className}`}>
      <Row className="lm-c-boxdesc-title" type="flex" align="middle">
        <Col className="desc-title" span={12}>
          {title}
        </Col>
        <Col className="desc-info" span={12}>
          {operationExt}
          {icon && <IconFont type={icon} />}
          {iconTest}
        </Col>
      </Row>
      <Col className="lm-c-boxdesc-content" span={24} style={wrapStyle} {...params}>
        {children}
      </Col>
    </Row>
  );
};

/**
 * @带小标题和操作icon的盒子
 * @param {*} props
 * @param {node} iconOperation 右侧拓展
 */
const BoxOperational = (props) => {
  const { iconOperation, ...params } = props;
  return <BoxDesc operationExt={iconOperation} {...params} />;
};

/**
 * @带padding
 * @param {*} props
 */
const PaddingBox = function (props) {
  const { className = '', ...params } = props;
  return React.cloneElement(<Box {...params} />, { className: `lm-c-padding-box ${className}` });
};

const LabelBoxDesc = function (props) {
  const { className = '', ...params } = props;
  return React.cloneElement(<BoxDesc {...params} />, {
    className: `lm-c-padding-label-box-desc ${className}`,
    style: { padding: '20px 40px ' },
  });
};

/**
 * 场所、设备档案模块的box
 * @param {*} props
 * @param {node} iconOperation header右侧按钮拓展
 */
const CustomHeaderBox = function (props) {
  const { className = '', iconOperation, ...params } = props;
  return React.cloneElement(<BoxDesc operationExt={iconOperation} {...params} />, {
    className: `lm-c-padding-label-box-desc ${className}`,
    style: { padding: '0' },
  });
};

/**
 * @盒子两端对齐
 * @param {*} props
 */
const BetweenBox = function (props) {
  const { children, className = '', ...params } = props;
  return (
    <div className={`lm-c-between-box ${className}`} {...params}>
      {children}
    </div>
  );
};

/**
 * @系统设置下table使用
 * @param {*} props
 */
const TableBox = function (props) {
  const { className = '', style, ...params } = props;
  return React.cloneElement(<BoxDesc {...params} />, {
    className: `lm-c-table-box-desc ${className}`,
    style: { padding: 'unset', border: 'unset', ...style },
  });
};

const customStyle = {
  fullScreen: {
    xxl: { span: 14, offset: 5 },
    xl: { span: 20, offset: 2 },
    lg: { span: 24 },
    md: { span: 24 },
    sm: { span: 24 },
    xs: { span: 24 },
  },
  rightScreen: {
    xxl: { span: 16, offset: 4 },
    xl: { span: 20, offset: 2 },
    lg: { span: 20, offset: 2 },
    md: { span: 24 },
    sm: { span: 24 },
    xs: { span: 24 },
  },
  listScreen: {
    xxl: { span: 20, offset: 2 },
    xl: { span: 20, offset: 2 },
    lg: { span: 22, offset: 1 },
    md: { span: 22, offset: 1 },
    sm: { span: 22, offset: 1 },
    xs: { span: 22, offset: 1 },
  },
};
/**
 * @详情居中的盒子
 * @param {*} props
 */
const InfoBox = (props) => {
  const { className = '', children, grid } = props;
  let gridStyle = grid ? customStyle[grid] : customStyle.fullScreen;
  return (
    <Row className={`lm-c-center-info-box ${className}`}>
      <Col {...gridStyle}>{children}</Col>
    </Row>
  );
};

/**
 * @列表剧中盒子
 * @param {*} props
 */
const ListBox = (props) => {
  const { className = '', children, style = {}, offsetOptions = { xxl: 2, xl: 1 } } = props;
  const offsetGrad = computedCuurentGrid();
  const [offset, setOffset] = useState(offsetOptions[offsetGrad] ? offsetOptions[offsetGrad] : 0);
  useEffect(() => {
    window.addEventListener('resize', resize);
    return () => {
      window.removeEventListener('resize', resize);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  function resize() {
    const offsetGrad = computedCuurentGrid();
    setOffset(offsetOptions[offsetGrad] ? offsetOptions[offsetGrad] : 0);
  }

  const paddingRow = useMemo(() => `${offset === 0 ? '20px' : (100 / 24) * offset + '%'}`, [offset]);

  return (
    <PaddingBox style={{ padding: '20px 0', ...style }} className={className}>
      {React.cloneElement(children, { paddingRow })}
    </PaddingBox>
  );
};

const MaskBox = (props) => {
  const { open = false, style = {}, ...params } = props;

  return (
    <Box style={{ ...style, position: 'relative' }} {...params}>
      {params.children}
      {open && <Box style={{ position: 'absolute', left: 0, top: 0, zIndex: 99 }} />}
    </Box>
  );
};

export default {
  Box,
  BoxDesc,
  PaddingBox,
  LabelBoxDesc,
  BetweenBox,
  TableBox,
  InfoBox,
  ListBox,
  BoxOperational,
  MaskBox,
  CustomHeaderBox,
  BoxDel,
};
