/**
 * Created by jiangzhixiong on 2024/04/28
 */

import React, { forwardRef, MouseEventHandler, ReactNode, useContext, useImperativeHandle } from 'react'
import { ConfigProvider, EMPTY_BASE64 } from '@zhst/meta'
import { Flex, Image } from 'antd';
import './index.less'

const { ConfigContext } = ConfigProvider

export interface IData {
  id?: string | number;
  url?: string;
  sort?: number;
  title?: string;
  subtitle?: string;
}

export interface CommonCardProps extends IData {
  prefixCls?: string;
  data?: IData
  width?: string;
  height?: string;
  onCreateTxt?: string;
  onCreate?: () => void;
  onAddTxt?: string;
  onAdd?: (data: any) => void;
  onRemoveTxt?: string;
  onRemove?: (data: any) => void;
  actions?: ReactNode[]
  onItemClick?: (data: any, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}

export interface CommonCardRefProps {
}

const CommonCard = forwardRef<CommonCardRefProps, CommonCardProps>((props, ref) => {
  const {
    prefixCls: customizePrefixCls,
    url,
    id,
    title,
    subtitle,
    sort,
    data,
    actions = [],
    width = '184px',
    height = '100%',
    onItemClick
  } = props
  const { getPrefixCls } = useContext(ConfigContext)
  const componentName = getPrefixCls('biz-search-card', customizePrefixCls);

  const optionListRender = (_actions: ReactNode[]) => {
    return _actions.map((action, i) => (
      // eslint-disable-next-line react/no-array-index-key
      <li key={`${componentName}-main-opt-action-${i}`}>
        {action}
        {i !== _actions.length - 1 && <em className={`${componentName}-main-opt-action-split`} />}
      </li>
    ))
  }

  const handleItemClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, _data: IData | undefined) => {
    onItemClick?.(data, e)
  }

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

  return (
    <div
      className={componentName}
      style={{
        width,
        height
      }}
      onClick={e => handleItemClick(e, data)}
    >
      <div className={`${componentName}-main`}>
        <i className={`${componentName}-main-num`}>{sort || id}</i>
        <Image
          className={`${componentName}-main-img`}
          src={url || data?.url}
          height={'240px'}
          preview={false}
          fallback={EMPTY_BASE64}
        />
        <ul className={`${componentName}-main-opt`}>
          {optionListRender(actions)}
        </ul>
      </div>
      <div className={`${componentName}-footer`}>
        <p className={`${componentName}-footer-tit`}>{title || data?.title}</p>
        <p className={`${componentName}-footer-subtitle`}>{subtitle || data?.subtitle}</p>
      </div>
    </div>
  )
})

export default CommonCard