import {
  Box,
  Divider,
  SkeletonGroup,
  SkeletonLine,
  Table,
  TableToolbar,
  Text,
  TextButton,
} from '@wix/design-system';
import React, { Fragment } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { useSelector } from '../../useSelector';
import { Trans } from '../Trans';

export interface SummaryItem {
  title: string;
  value: string;
}
export type SummaryBarStatus = 'loading' | 'error' | 'success';
export type SummaryData = SummaryItem[];

export interface SummaryBarProps {
  /**
   * Data to display in the summary bar.
   * @external
   */
  data: SummaryData;
  /**
   * Summary bar status.
   * <br><br>
   * Supported values:<br>
   * - `"success"`<br>
   * - `"loading"`<br>
   * - `"error"`
   * @external
   * @default success
   */
  status: SummaryBarStatus;
  /**
   * Function that is called every time **Reload** is clicked.
   * @external
   */
  onRetry: () => void | Promise<void>;
}

const SkeletonSummaryBar = () => (
  <SkeletonGroup dataHook="skeleton-summary-bar">
    <Box gap="SP4" height="18px" verticalAlign="middle">
      <SkeletonLine width="112px" />
      <SkeletonLine width="112px" />
      <SkeletonLine width="112px" />
    </Box>
  </SkeletonGroup>
);

const ErrorSummaryBar = ({
  onRetry,
}: {
  onRetry: SummaryBarProps['onRetry'];
}) => {
  const { translate: t, ...container } = useWixPatternsContainer();
  useSelector(() => container.initTask.status);

  return (
    <Box gap="3px" dataHook="error-summary-bar">
      <Text
        weight="thin"
        size="small"
        skin="standard"
        secondary
        dataHook="summary-bar-error-text"
      >
        {t('cairo.table.summaryBar.loadError')}
      </Text>
      <TextButton
        size="small"
        weight="thin"
        dataHook="summary-bar-retry-button"
        onClick={onRetry}
      >
        {t('cairo.table.summaryBar.loadError.cta')}
      </TextButton>
    </Box>
  );
};

const SummaryBarContent = ({ data }: { data: SummaryBarProps['data'] }) => {
  const { translate: t, ...container } = useWixPatternsContainer();
  useSelector(() => container.initTask.status);

  return (
    <TableToolbar.ItemGroup dataHook="summary-bar-content">
      {data.map(({ title, value }, index) => (
        <Fragment key={index}>
          <TableToolbar.Item>
            <Box gap="3px">
              <Box>
                <Text
                  weight="thin"
                  size="small"
                  skin="standard"
                  secondary
                  dataHook="summary-bar-item"
                >
                  <Trans
                    i18nKey="cairo.table.summaryBar.list.item"
                    values={{
                      title,
                      value,
                    }}
                    components={{
                      value: (
                        <Text weight="normal" size="small" skin="standard" />
                      ),
                    }}
                  />
                </Text>
              </Box>
            </Box>
          </TableToolbar.Item>
          <TableToolbar.Item>
            {index !== data.length - 1 && (
              <Box height="18px">
                <Divider direction="vertical" dataHook="summary-bar-divider" />
              </Box>
            )}
          </TableToolbar.Item>
        </Fragment>
      ))}
    </TableToolbar.ItemGroup>
  );
};

const _SummaryBar = (props: SummaryBarProps) => {
  const { data, status, onRetry } = props;
  const contentByStatus = {
    loading: <SkeletonSummaryBar />,
    error: <ErrorSummaryBar onRetry={onRetry} />,
    success: <SummaryBarContent data={data} />,
  };

  return (
    <Table.SubToolbar dataHook="summary-bar">
      {contentByStatus[status]}
    </Table.SubToolbar>
  );
};

export const SummaryBar = observer(_SummaryBar);