import { Typography } from 'antd';
import React from 'react';

export type EllipsisTitleProps = React.ComponentProps<typeof Typography.Title>;

export const EllipsisTitle = (props: EllipsisTitleProps) => {
  const [isEllipsis, setEllipsis] = React.useState(false);

  return (
    <Typography.Title
      {...props}
      ellipsis={
        props.ellipsis
          ? {
              ...(typeof props.ellipsis === 'object' ? props.ellipsis : {}),
              onEllipsis(value) {
                setEllipsis(value);
                if (typeof props.ellipsis === 'object') {
                  props.ellipsis.onEllipsis(value);
                }
              },
            }
          : false
      }
      title={isEllipsis ? String(props.children) : ''}
    />
  );
};
