import React from 'react';
import { View } from '..';
import { getLinearGradientString } from '../utils/color/getLinearGradientString';
import { observer } from 'mobx-react';
import { createRadialGradientString } from '../utils/color/getRadialGradientString';
import { ApphouseComponent } from './component.interfaces';
import { CSSProperties } from 'glamor';
import { useLocalStyles } from '../styles/defaults/useLocalStyles';
import { ViewProps } from './cross-platform/Views/View';

export interface GradientBackgroundProps
  extends ViewProps,
    ApphouseComponent<CSSProperties> {
  /**
   * The colors to be used in the gradient mask.
   */
  colors: string[];
  /**
   * Indicates whether the component should take up the full width of the parent container.
   * @default false
   */
  fullWidth?: boolean;
  /**
   * Indicates whether the component should take up the full height of the parent container.
   * @default false
   */
  fullHeight?: boolean;
  /**
   * The content of the component.
   */
  children?: React.ReactNode;
  /**
   * Indicates whether the gradient should be radial.
   * @default false (linear)
   */
  radial?: boolean;
}
export const GradientBackground: React.FC<GradientBackgroundProps> = observer(
  (props) => {
    const {
      colors,
      children,
      radial,
      fullHeight,
      fullWidth,
      styleOverwrites,
      ...rest
    } = props;
    const localStyles = useLocalStyles(
      {
        background: radial
          ? createRadialGradientString(colors)
          : getLinearGradientString(colors),
        width: fullWidth ? '100%' : props.width,
        height: fullHeight ? '100%' : props.height
      },
      styleOverwrites,
      props.gutters
    );

    return (
      <View {...rest} styleOverwrites={localStyles}>
        {children}
      </View>
    );
  }
);