import cs from 'classnames';

import './styles/index.scss';
import { IconLoading, useUIKit } from '@tencentcloud/uikit-base-component-react';
import { PlaceholderLoadError } from './PlaceholderLoadError';
import { PlaceholderEmptyList } from './PlaceholderEmptyList';

export const PlaceHolderTypes = {
  LOADING: 'LOADING',
  NO_CONVERSATIONS: 'NO_CONVERSATIONS',
  WRONG: 'WRONG',
} as const;

export interface PlaceHolderProps {
  className?: string | undefined;
  type: keyof typeof PlaceHolderTypes;
  iconSize?: number | undefined;
  searchString?: string | undefined;
  retry?: (() => void) | undefined;
}

export function PlaceHolder({
  className = '',
  type,
  iconSize = 42,
  searchString = '',
  retry,
}: PlaceHolderProps) {
  const { t } = useUIKit();
  const PlaceHolderStringTypes = {
    [PlaceHolderTypes.LOADING]: '',
    [PlaceHolderTypes.NO_CONVERSATIONS]: t('TUIConversation.No conversation'),
    [PlaceHolderTypes.WRONG]: t('TUIConversation.Something was wrong'),
  };
  return (
    <div
      className={cs(
        className,
        'tui-place-holder',
      )}
    >
      <div className="tui-place-holder__icon">
        {
          type === PlaceHolderTypes.LOADING && (
            <IconLoading className="tui-place-holder-loading" size={iconSize ? `${iconSize}px` : 'auto'} />
          )
        }
        {
          (type === PlaceHolderTypes.NO_CONVERSATIONS) && (
            <PlaceholderEmptyList />
          )
        }
        {
          (type === PlaceHolderTypes.WRONG) && (
            <PlaceholderLoadError />
          )
        }
      </div>
      {
        PlaceHolderStringTypes[type]
        && (
          <div className="tui-place-holder__label">
            {searchString
              ? `${PlaceHolderStringTypes[type]}  '${searchString}' `
              : PlaceHolderStringTypes[type]}
          </div>
        )
      }
      {type === PlaceHolderTypes.WRONG && retry && (
        <div className="tui-place-holder__button">
          <button onClick={retry}>Retry</button>
        </div>
      )}
    </div>
  );
}