import { observer } from 'mobx-react';
import React from 'react';
import { CSSProperties, css } from 'glamor';
import { PlanSelectionCard, PlanSelectionCardProps } from './PlanSelectionCard';
import { ApphouseComponent } from '../components/component.interfaces';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { BoxSizeStyles } from '../styles/defaults/themes.interface';
import { merge, useApphouse } from '..';

export interface PlanSelectionPageStyles {
  container?: CSSProperties;
}

export interface PlanSelectionPageProps
  extends ApphouseComponent<PlanSelectionPageStyles> {
  cards: PlanSelectionCardProps[];
  /**
   * The size of the card.
   * @optional
   * @default 'm'
   */
  size?: keyof BoxSizeStyles;
}

export const PlanSelectionPage: React.FC<PlanSelectionPageProps> = observer(
  (props) => {
    const { styleOverwrites, gutters, cards, size = 'm' } = props;
    const { theme } = useApphouse();
    const boxStyles = theme.styles.boxSize[size];
    const componentStyles: PlanSelectionPageStyles = merge({}, boxStyles, {
      container: {
        display: 'flex',
        flexDirection: 'row',
        gap: boxStyles.paddingTop,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignItems: 'stretch',
        width: '100%',
        height: '100%'
      }
    });

    const localStyles = useLocalStyles<PlanSelectionPageStyles>(
      componentStyles,
      styleOverwrites,
      gutters
    );
    return (
      <div data-xray="PlanSelectionPage" {...css(localStyles.container)}>
        {cards.map((card) => {
          return <PlanSelectionCard key={card.id} size={size} {...card} />;
        })}
      </div>
    );
  }
);