import React, { useState } from 'react';
import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBox } from '../s-components/layout/s-box';
import { ShadowBox } from './shadow-box';
import { SImage } from '../s-components/s-image';

type TProps = {
  variant?: 'simple' | 'shadow';
  tappedCss?: Record<string, string | number | null | undefined>;
  defaultCss?: Record<string, string | number | null | undefined>;
  tappedBg?: string;
  defaultBg?: string;
  tappedGradient?: string[];
  defaultGradient?: string[];
  onPress?: () => void;
  shadowHeight?: number;
  renderBody?: ({ pressed }: { pressed: boolean }) => any;
  bgImage?: string;
  bgRules?: Record<string, string | number | null | undefined>;
  tappedGradientOpacity?: number;
  defaultGradientOpacity?: number;
  testID?: string;
  disabled?: boolean;
  children?: React.ReactElement;
};

export const ToggleStyled: React.FC<TProps> = props => {
  const [pressed, setPressed] = useState(false);

  const {
    children,
    tappedCss,
    defaultCss,
    tappedBg,
    defaultBg,
    onPress,
    variant,
    tappedGradient,
    defaultGradient,
    shadowHeight,
    renderBody,
    bgImage,
    bgRules,
    tappedGradientOpacity,
    defaultGradientOpacity,
    disabled,
    ...rest
  } = props;
  const cssRules = pressed ? tappedCss : defaultCss;
  const gradient = pressed ? tappedGradient : defaultGradient;
  const gradientOpacity = pressed
    ? tappedGradientOpacity
    : defaultGradientOpacity;
  const hasGradient = !!gradient;
  let content = null;

  if (variant === 'simple') {
    content = (
      <SBox {...cssRules} {...rest}>
        {renderBody ? renderBody({ pressed }) : children}
      </SBox>
    );
  } else if (variant === 'shadow') {
    content = (
      <SBox {...rest} height={shadowHeight}>
        <ShadowBox height={shadowHeight}>
          <SBox position="relative" flex={1}>
            <SBox
              style={[StyleSheet.absoluteFill]}
              bg={pressed ? tappedBg : defaultBg}
              {...cssRules}
            >
              {bgImage ? (
                <SImage {...bgRules} source={{ uri: bgImage }} />
              ) : null}
              {hasGradient ? (
                <LinearGradient
                  colors={gradient!}
                  style={[
                    StyleSheet.absoluteFill,
                    { borderRadius: 8, opacity: gradientOpacity },
                  ]}

                  // locations={[0, 0.4, 1]}
                />
              ) : null}
            </SBox>
            <SBox flex={1}>{children}</SBox>
          </SBox>
        </ShadowBox>
      </SBox>
    );
  }

  return (
    <TouchableWithoutFeedback
      testID="toggle-styled"
      onPressIn={() => {
        setPressed(true);
      }}
      onPressOut={() => {
        setPressed(false);
      }}
      onPress={() => {
        if (onPress && !disabled) {
          onPress();
        }
      }}
    >
      {content}
    </TouchableWithoutFeedback>
  );
};

ToggleStyled.defaultProps = {
  variant: 'simple',
};