import {CheckCard} from '@ant-design/pro-components';
import { Dropdown, Flex, Input, Pagination, theme, Tooltip,Button, Empty, Typography} from 'antd';
import {forwardRef, memo, useCallback, useImperativeHandle, useState} from 'react'
const { Search } = Input;
import { Avatar ,Card,Checkbox ,Tag,Col,Divider} from 'antd';
const CheckboxGroup = Checkbox.Group;
import {styled} from 'styled-components';
import {EllipsisOutlined} from "@ant-design/icons";
import useI18NPrefix from "../hooks/useI18NPrefix";
import EMPTY from '../assets/empty.svg'
/**
 * @style: 样式
 *
 * @options:[
 *   {
 *     @title: '头信息',
 *     @description: '这是一段关于该算法的说明',
 *     @value: '值',
 *     @content: React.ReactNode
 *     @tag:"头信息后面的Tag"
 *     @tagColor:"tag颜色"
 *     @extra: []  "右侧的按钮"
 *     @avatar: {
 *       @src: '链接'
 *       @size: '大小'
 *       @shape: '形状'
 *     },
 *   }
 * ]
 *
 * @type: card 选择卡片 | checkBox
 */

const component=forwardRef(({
  options,
  style,
  onSearch,
  onSelect,
  type="card",
  tooltip,
  extra,
  actions,
  onDoubleClick,
  onChecked,
  pagination,
  onCreate,
  value,
  hoverable=true
},ref)=>{
  const t = useI18NPrefix('global');
  const isArray = Object.prototype.toString.call(options) === '[object Array]';
  const {token} = theme.useToken();
  const [check,setCheck]=useState([]);

  useImperativeHandle(ref, () => ({
    onAllCheck
  }));

  const onAllCheck=(e)=>{
    onCardCheck(e?options:[])
  }

  const cardCSS = {
    backgroundColor:token.colorPrimaryBg,
    border: `1px solid ${token.colorPrimaryBorder}`
  }

  /** 用于控制卡片颜色*/
  const styleFun =(item)=>check.findIndex(record=>record.value===item)<0 ? {} : cardCSS

  /** checkCard 【勾选/取消】 回调*/
  const onCardCheck = useCallback((e)=>{
    onChecked && onChecked(e)
    setCheck(e)
  },[])

  const onCardSelect = useCallback((id)=>{
    if (id){
      const record = options.find(option=>option?.value?.id===id)
      onSelect?.(record?.value)
    }else {
      const record = options.find(option=>!option?.value?.id)
      onSelect?.(record?.value)
    }
  },[options])

  const cardExtra =(item)=> {
    if (actions) {
      return (
        <Dropdown
          placement="bottomCenter"
          trigger="click"
          menu={{
            onClick: (event) => {
              event.domEvent.stopPropagation();
              actions && actions.onClick(event, item);
            },
            items: actions && actions.items,
          }}
        >
          <EllipsisOutlined
            style={{fontSize: 22, color: 'rgba(0,0,0,0.5)'}}
            onClick={(e) => e.stopPropagation()}
          />
        </Dropdown>
      )
    }
  }
  return (
    <>
      {onSearch && <Search allowClear onSearch={onSearch} style={{marginBottom:8}} placeholder={t("placeholder.filter")}/>}
      {extra}
      {
        options.length === 0 &&
          <Empty
            style={{height:pagination?'65vh':'67.5vh',paddingTop:'15%'}}
            image={EMPTY}
            imageStyle={{
              height: 60,
            }}
            description={
              <Typography.Text>
                {t("placeholder.emptyAdd")}
              </Typography.Text>
            }
          >
            {onCreate && <Button type="primary" onClick={onCreate}>{t("button.createNow")}</Button>}
          </Empty>
      }
      {
        options.length > 0 &&
        <Container style={{height:'100%',padding:13}}>
          {
            type==="card" &&
            <CheckCard.Group style={style?style:{width:"100%"}} value={value?.id} onChange={onCardSelect}>
              {
                isArray&&options.map(item=>
                  <CheckCard
                    style={{width:"100%",marginBlockEnd:3,cursor:'pointer'}}
                    key={item?.value?.id||item?.value}
                    title={item?.title}
                    value={item?.value?.id}
                    extra={cardExtra(item)}
                    onDoubleClick={()=>{
                      onDoubleClick && onDoubleClick(item)
                    }}
                    avatar={
                      item?.avatar&&
                      <Avatar
                        size={item?.avatar?.size}
                        shape={item?.avatar?.shape}
                        src={item?.avatar?.src}
                      />
                    }
                  />
                )
              }
            </CheckCard.Group>
          }
          {
            type==="checkBox" &&
            <CheckboxGroup value={check} onChange={onCardCheck} style={{width:'100%'}}>
              {
                isArray&&options.map(item=>
                  <Col span={24} key={item?.value}>
                    <CustomCard
                      size="small"
                      hoverable={hoverable}
                      style={styleFun(item?.value)}
                      onDoubleClick={()=>{
                        onDoubleClick && onDoubleClick(item)
                      }}
                    >
                      <Tooltip placement="top" title={tooltip} mouseEnterDelay={0.5}>
                        <Flex>
                          {/*卡片头信息 以及 内容*/}
                          <Col flex="auto" >
                            <Checkbox value={item}>
                              <Span>
                                {item?.title}
                                {
                                  item?.tag &&
                                  <Tag color={item?.tag?.color||'#2db7f5'} style={{marginLeft:10}}>{item?.tag?.label}</Tag>
                                }
                              </Span>
                            </Checkbox>

                            <Contant>
                              {item?.content}
                            </Contant>
                          </Col>

                          {/*卡片头Extra按钮*/}
                          {
                            item?.extra && Object.prototype.toString.call(item?.extra) === '[object Array]' &&
                            (
                              <>
                                <CustomDivider type="vertical" />
                                <Col flex="auto" style={{paddingBlockStart:40,paddingBlockEnd:40}}>
                                  {
                                    item.extra.map(item=>item)
                                  }
                                </Col>
                              </>
                            )
                          }
                        </Flex>
                      </Tooltip>
                    </CustomCard>
                  </Col>
                )
              }
            </CheckboxGroup>
          }
        </Container>
      }
      { type==="checkBox" && pagination && <Pagination align="end" showSizeChanger {...pagination}/>}
    </>
  )
})

export const CheckCardList = memo(component)

const Span = styled.span`
  font-size: ${p => p.theme.fontSizeLG + 'px'};
  font-weight: bold;
`;

const Container = styled.div`
  height: 68vh;
  overflow-y: auto;
  overflow-x: hidden;
`

const CustomCard=styled(Card)`
  margin-top: 18px;
  width: 100%;
  cursor:pointer;
`

const Contant = styled.div`
  margin-top: 15px;
`

const CustomDivider=styled(Divider)`
  height: 9vh;
  background-color: ${p=>p.theme.colorPrimaryBg};
`
