import {Card as AntdCard, GetProps} from 'antd';
import {ProCard} from "@ant-design/pro-components";
import {Element, useEditor} from '@craftjs/core';
import React, {forwardRef, FC, ReactNode} from 'react';
import {CardSettings, cardDefaultProps} from './card-settings';

export const Card = forwardRef<HTMLDivElement, ICardProps>(({children, openExtra, paddingInline, paddingBlock, ...otherProps}, ref) => {
  const {query} = useEditor();
  const options = query.getOptions();

  return (
    <ProCard
      {...otherProps}
      // headStyle={{paddingInline, paddingBlock, paddingBottom: 0}}
      // bodyStyle={{paddingInline, paddingBlock}}
      ref={ref}
      extra={openExtra ? <Element id="pro-card-extra" is={options.resolver.Layout} canvas/> : undefined}
    >
      {children}
    </ProCard>
  );
})

interface ICardProps extends GetProps<typeof ProCard> {
  /** 开启右上角自定义区域 */
  openExtra?: boolean;
  paddingInline?: number;
  paddingBlock?: number;
}

export const Component = Card;
export const Settings = CardSettings;
export const defaultProps = cardDefaultProps;

declare global {
  interface Window {
    BaseCard?: any;
  }
}

export const type = 'Card';