import React, { JSX } from 'react';
import styled from 'styled-components';

import type { ListType } from '@redocly/theme/core/types';

import { HexagonIcon } from '@redocly/theme/icons/HexagonIcon/HexagonIcon';

interface CatalogEntitiesEmptyStateProps {
  listType?: ListType;
}

const getEmptyStateContent = (
  listType: ListType,
): { header: string; paragraph1: string; paragraph2: string } => {
  switch (listType) {
    case 'team':
      return {
        header: 'No team members yet',
        paragraph1: 'Your team members will appear here',
        paragraph2: "once they've been added to the team.",
      };
    case 'api-operation':
      return {
        header: 'No operations yet',
        paragraph1: 'Your operations will appear here',
        paragraph2: "once they've been added to the API description.",
      };
    case 'data-schema':
      return {
        header: 'No schemas yet',
        paragraph1: 'Your schemas will appear here',
        paragraph2: "once they've been added to the API description.",
      };
    default:
      return {
        header: 'No entities found',
        paragraph1: 'Try adjusting your search criteria or',
        paragraph2: 'check back later for new additions.',
      };
  }
};

export function CatalogEntitiesEmptyState({
  listType = 'default',
}: CatalogEntitiesEmptyStateProps): JSX.Element {
  const { header, paragraph1, paragraph2 } = getEmptyStateContent(listType);

  return (
    <EmptyStateWrapper data-component-name="Catalog/CatalogEntitiesEmptyState">
      <EmptyStateIconWrapper>
        <HexagonIcon size="21px" color="var(--color-warm-grey-7)" />
      </EmptyStateIconWrapper>
      <EmptyStateHeader>{header}</EmptyStateHeader>
      <EmptyStateText>{paragraph1}</EmptyStateText>
      <EmptyStateText>{paragraph2}</EmptyStateText>
    </EmptyStateWrapper>
  );
}

const EmptyStateWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--catalog-empty-state-padding);
  text-align: center;
  min-height: var(--catalog-empty-state-min-height);
`;

const EmptyStateIconWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-warm-grey-2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: var(--spacing-xxs);
`;

const EmptyStateHeader = styled.p`
  color: var(--catalog-empty-state-header-text-color);
  font-size: var(--catalog-empty-state-header-font-size);
  font-weight: var(--catalog-empty-state-header-font-weight);
  line-height: var(--catalog-empty-state-header-line-height);
  margin: 0;
`;

const EmptyStateText = styled.p`
  color: var(--catalog-empty-state-text-color);
  font-size: var(--catalog-empty-state-font-size);
  font-weight: var(--catalog-empty-state-font-weight);
  line-height: var(--catalog-empty-state-line-height);
  margin: 0;
`;