import { useApphouse } from '../context/useApphouse';
import { observer } from 'mobx-react';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { ApphouseComponent } from '../components/component.interfaces';
import { CSSProperties, css } from 'glamor';
import { Button, Paper, Text } from '..';
import { merge } from '../utils/obj/merge';
import {
  BoxSizeStyles,
  ThemeColors
} from '../styles/defaults/themes.interface';
import { toJS } from 'mobx';
import React from 'react';
import { FlexStyle } from '../components/cross-platform/@types/styles.cross-platform.interface';
import { getBaseColorFromGradient } from '../utils/color/getBaseColorFromGradient';
import { getGutterStyles } from '../styles/getGutterStyles';
/**
 * Represents the PlanSelectionCard component.
 */
export interface PlanSelectionCardStyles {
  container?: CSSProperties;
  title?: CSSProperties;
  description?: CSSProperties;
  price?: CSSProperties;
  featureListWrapper?: CSSProperties;
  currency?: CSSProperties;
  features?: CSSProperties;
  disabled?: CSSProperties;
  selected?: CSSProperties;
  feature?: CSSProperties;
  ctaButton?: CSSProperties;
}

/**
 * Represents the props for the PlanSelectionCard component.
 * @interface PlanSelectionCardProps
 * @extends ApphouseComponent<PlanSelectionCardStyles>
 */
export interface PlanSelectionCardProps
  extends ApphouseComponent<PlanSelectionCardStyles> {
  /**
   * The title of the plan.
   * @type {string}
   */
  title: string;

  /**
   * The description of the plan.
   * @type {string}
   */
  description: string;

  /**
   * The price of the plan.
   * @type {number}
   */
  price: number;

  /**
   * The currency symbol used for the price.
   * @type {string}
   */
  currency: string;

  /**
   * An array of features for the plan.
   * @type {string[]}
   */
  features: string[];

  /**
   * The action to be performed when the card is clicked.
   * @type {() => void}
   */
  action: () => void;

  /**
   * Determines whether the card is disabled. (Optional)
   * If true, the options and clicking on the card will be disabled.
   * @type {boolean}
   * @default false
   */
  disabled?: boolean;

  /**
   * The currency symbol used for the price.
   * @type {string}
   * @default $
   * @optional
   */
  currencySymbol?: string;

  /**
   * Determines whether the card is selected. (Optional)
   * @type {boolean}
   * @default false
   */
  selected?: boolean;
  /**
   * The unique identifier for the card.
   * @type {string}
   */
  id: string;
  /**
   * The text to be displayed on the button.
   */
  buttonText: string;
  /**
   * The size of the card.
   */
  size?: keyof BoxSizeStyles;
  /**
   * The maximum width of the card.
   * @type {string}
   * @optional
   * @default 100%
   * @example 300px
   */
  maxWidth?: string;
  /**
   * The period of the plan.
   * @default mo.
   */
  period?: string;
  /**
   * The header of the card.
   * @default null
   * @optional
   */
  header?: React.ReactNode;
  /**
   * The footer of the card.
   * @default null
   * @optional
   * @example <Text>Footer</Text>
   * @example <Button>Footer</Button>
   */
  footer?: React.ReactNode;
  /**
   * The alignment of the contents of the card.
   * @default center
   */
  align?: FlexStyle['alignItems'];
  /**
   * The color scheme of the card.
   * It will be applied to the title button and price.
   */
  colorScheme?: keyof ThemeColors | string;
  /**
   * The background color of the card.
   * @default surface
   */
  background?: string;
}

export const PlanSelectionCard: React.FC<PlanSelectionCardProps> = observer(
  (props) => {
    const {
      styleOverwrites,
      gutters,
      title,
      header,
      footer,
      description,
      price,
      currency,
      currencySymbol,
      features,
      action,
      disabled,
      selected,
      buttonText,
      maxWidth = '100%',
      period = 'mo.',
      size = 'm',
      background = 'surface',
      align = 'center',
      colorScheme = 'onSurface'
    } = props;
    const { theme } = useApphouse();
    const { styles } = theme;
    const boxedStyles = toJS(styles.boxSize[size]);
    const colors = theme.colors;
    // @ts-ignore
    const color = colors[colorScheme] || colorScheme;

    const componentStyles: PlanSelectionCardStyles = merge(
      {},

      {
        container: {
          // @ts-ignore
          background: colors[background] || background,
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: align,
          minWidth: '320px',
          pointerEvents: disabled ? 'none' : 'auto',
          opacity: disabled ? 0.5 : 1,
          maxWidth: maxWidth,
          border: selected ? `3px solid ${color}` : 'none'
        }
      },
      { container: boxedStyles },
      { container: getGutterStyles(gutters) },
      {
        title: {
          marginTop: theme.tokens.spacings.l,
          marginBottom: theme.tokens.spacings.l,
          color: getBaseColorFromGradient(color)
        },
        features: {
          marginTop: theme.tokens.spacings.l
        },
        price: {
          marginTop: theme.tokens.spacings.l,
          color: getBaseColorFromGradient(color)
        },
        ctaButton: {
          marginTop: theme.tokens.spacings.l,
          marginBottom: theme.tokens.spacings.l,
          backgroundColor: color,
          background: color,
          borderColor: color
        }
      }
    );

    const localStyles = useLocalStyles<PlanSelectionCardStyles>(
      componentStyles,
      styleOverwrites
    );
    return (
      <Paper
        data-xray="PlanSelectionCard"
        styleOverwrites={localStyles.container}
        data-style="container"
      >
        {header && header}
        <Text
          variant="title"
          styleOverwrites={localStyles.title}
          data-style="title"
        >
          {title}
        </Text>
        <Text styleOverwrites={localStyles.description}>{description}</Text>
        <Text
          variant="header"
          styleOverwrites={localStyles.price}
          data-style="price"
        >
          {currencySymbol}
          {price}
        </Text>
        <Text variant="caption">
          {currency}/{period}
        </Text>

        <Text
          variant="title"
          styleOverwrites={localStyles.features}
          data-style="features"
        >
          Features
        </Text>
        <ul
          {...css(localStyles.featureListWrapper)}
          data-style="featureListWrapper"
        >
          {features.map((feature) => (
            <li {...css(localStyles.feature)} data-style="feature">
              {feature}
            </li>
          ))}
        </ul>
        <Button
          size={size}
          onClick={() => {
            if (!disabled) {
              action && action();
            }
          }}
          styleOverwrites={localStyles.ctaButton}
        >
          {buttonText}
        </Button>
        {footer && footer}
      </Paper>
    );
  }
);