import { observer } from 'mobx-react';
import React from 'react';
import { View } from '../components/View';
import { Button } from '../components/Button';
import { CSSProperties, css } from 'glamor';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { ApphouseComponent } from './component.interfaces';
import {
  ButtonStyleVariant,
  LayoutStyles
} from '../styles/defaults/themes.interface';

/**
 * Styles for the NavigationList component.
 */
export interface NavigationListStyles {
  container?: CSSProperties;
  ul?: CSSProperties;
  li?: CSSProperties;
  button?: CSSProperties;
}

/**
 * Represents a navigation item.
 */
export interface NavigationItem {
  /**
   * The ID of the navigation item.
   */
  id: string;
  /**
   * The label displayed for the navigation item.
   */
  label: string;
  /**
   * The callback function to be executed when the navigation item is clicked.
   */
  action?: () => void;
  /**
   * Indicates whether the navigation item should be disabled or not.
   */
  disabled?: boolean;
}
/**
 * Props for the NavigationList component.
 */
export interface NavigationListProps
  extends ApphouseComponent<NavigationListStyles> {
  /**
   * Unique Id for the navigation list
   */
  id: string;
  /**
   * The current id
   */
  current: string;
  /**
   * The orientation of the NavigationList component.
   */
  orientation: keyof LayoutStyles;
  /**
   * Callback function invoked when a page is changed.
   *
   * @param pageNumber - The selected page number.
   */
  onPageChange: (pageId: string) => void;
  /**
   * If true, the previous and next buttons will be shown.
   * @default false
   * @optional
   */
  showPrevNext?: boolean;
  /**
   * If true, the next button will be disabled.
   * if showPrevNext is false, this prop will block next buttons to be clicked
   * @default false
   */
  disableNext?: boolean;
  /**
   * If true, the page numbers will be hidden.
   * Ensure to set showPrevNext to true.
   * @default false
   */
  hideNumbers?: boolean;
  /**
   * Items to be shown in the navigation.
   */
  items: NavigationItem[];
  /**
   * The variant of the button when the button is active
   * @default 'primary'
   */
  buttonVariantActive?: keyof ButtonStyleVariant;
  /**
   * The variant of the button when the button is inactive
   * @default 'clear'
   * @optional
   */
  buttonVariantInactive?: keyof ButtonStyleVariant;
  /**
   * The variant of the button when the button is disabled
   * @default 'clear'
   * @optional
   */
  buttonVariantDisabled?: keyof ButtonStyleVariant;
}

export const NavigationList: React.FC<NavigationListProps> = observer(
  ({
    current,
    onPageChange,
    styleOverwrites,
    orientation,
    items,
    buttonVariantActive = 'primary',
    buttonVariantInactive = 'clear',
    buttonVariantDisabled = 'clear',
    id
  }) => {
    const componentStyles: NavigationListStyles = {
      container: {
        width: '100%',
        justifyContent: 'center'
      },
      ul: {
        margin: 0,
        padding: 0,
        display: 'flex',
        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
        listStyleType: 'none'
      },
      li: {},
      button: {
        textAlign: 'start'
      }
    };

    const localStyles = useLocalStyles<NavigationListStyles>(
      componentStyles,
      styleOverwrites
    );

    return (
      <View
        data-xray="NavigationList"
        orientation={orientation}
        styleOverwrites={localStyles.container}
        data-style="container"
      >
        <ul {...css(localStyles.ul)}>
          {items.map((item) => {
            const active = current === item.id;
            let variant = buttonVariantInactive;
            if (item.disabled) {
              variant = buttonVariantDisabled;
            } else if (active) {
              variant = buttonVariantActive;
            }
            return (
              <li key={`${id}${item.id}`} {...css(localStyles.li)}>
                <Button
                  disabled={item.disabled}
                  variant={variant}
                  onClick={() => {
                    item?.action && item?.action();
                    onPageChange && onPageChange(item.id);
                  }}
                  styleOverwrites={localStyles.button}
                >
                  {item.label}
                </Button>
              </li>
            );
          })}
        </ul>
      </View>
    );
  }
);