import {memo, useState, forwardRef, useMemo, useImperativeHandle} from 'react'
import {Modal, Button} from 'antd'
import {PlusOutlined, PlusSquareFilled} from '@ant-design/icons'
import {styled} from 'styled-components'
import {ProCard} from '@ant-design/pro-components';
import {splitArray} from "../../utils/listTools.js";
import useI18NPrefix from "../hooks/useI18NPrefix";

const component = forwardRef(({
  title,
  description,
  options,
  onSelect = () => {},
  buttonProps = {},
  cardStyle,
  defaultChecked
}, ref) => {
  const t = useI18NPrefix('global');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const onChange = (values) => {
    onSelect(values)
    setIsModalOpen(false)
  }

  useImperativeHandle(ref, () => ({
    onModelSelectOpen(){
      setIsModalOpen(true)
    }
  }));

  const mergeStyle = {
    height:250,
    width:"90%",
    ...cardStyle
  };

  const container = (cell)=> {
    const iconStyle={
      fontSize: 35,
      color: '#1677ff',
      paddingBlock: 10,
      display:'flex',
      alignItems:'center',
      justifyContent:'center'
    }
    return (
      <div>
        {cell.icon === true ? <PlusSquareFilled style={iconStyle}/> : cell.icon}
        <LabelBox children={cell.label}/>
        <CardDescription children={cell.description}/>
      </div>
    )
  }

  // 将options分为两两一组
  const newSplit = useMemo(()=>{
    const arr = splitArray(options)
    return arr.map((item,index)=> (
      <ProCard key={index}>
        {
          /** 短的1/2 */
          item.length===2 && item.map(cell=>
            <CustomCard
              className={cell.value===defaultChecked&&'checked'}
              onClick={()=>onChange(cell)}
              style={mergeStyle}
              key={cell.value}
              layout="center"
              bordered
            >
              {container(cell)}
            </CustomCard>
          )
        }
        {
          /** 长的铺满 */
          item.length===1 && item.map(cell=>
            <CustomCard
              className={cell.value===defaultChecked&&'checked'}
              onClick={()=>onChange(cell)}
              style={{...mergeStyle,width:'95%'}}
              key={cell.value}
              layout="center"
              bordered
            >
              {container(cell)}
            </CustomCard>
          )
        }
      </ProCard>
    ))
  },[options])

  return (
    <>
      <Button ref={ref} type="primary" icon={<PlusOutlined/>} {...buttonProps} onClick={() => {
        setIsModalOpen(true)
      }}>
        {buttonProps?.children ? buttonProps.children : t("button.create")}
      </Button>
      <Modal
        width={800}
        styles={{body:{marginBlock: 50}}}
        title={title}
        open={isModalOpen}
        footer={null}
        destroyOnClose
        maskClosable={false}
        onCancel={() => {
          setIsModalOpen(false)
        }}
      >
        {/** 提示区 */}
        {description && <Description children={description}/>}

        {/** 选项区 */}
        {
          options &&
          <ProCard direction="column" bordered={false} style={{paddingInlineStart:40}}>
            { newSplit }
          </ProCard>
        }
      </Modal>
    </>
  )
})
export const SelectModal = memo(component)

const Description = styled.div`
    margin-block-end: 15px;
    margin-block-start: 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${p => p.theme.colorText};
    font-size: ${p => p.theme.fontSizeLG + 'px'};
`;

const CustomCard =styled(ProCard)`
  background-color: ${p=>p.theme.colorPrimaryBg};
  cursor: pointer;
  &:hover{
    border: 1px solid ${p => p.theme.colorPrimaryBorderHover};
  }
  &.checked {
    border: 1px solid ${p => p.theme.colorPrimary};
  }
`;

const LabelBox = styled.div`
  color: ${p => p.theme.colorText};
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const CardDescription = styled.div`
    height: 30px;
    overflow:hidden;
    margin-block-start:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: ${p => p.theme.colorTextDescription};
    font-size: ${p => p.theme.fontSizeSM + 'px'};
`;
