import React from 'react';
import { View, StyleSheet } from 'react-native';
import { usePaywallContext } from '../../context/PaywallContext';
import { applyStyles, parseColor, parseSize, shadowStyles } from '../../utils/styles';

interface Props {
  component: any;
  scaleFactor: number;
  parentDirection?: string;
}

export const NamiRadioButton: React.FC<Props> = ({ component, scaleFactor, parentDirection }) => {
  const ctx = usePaywallContext();
  const skuId = component.sku?.id ?? '';
  const selected = Object.values(ctx.state.selectedProducts ?? {}).includes(skuId);

  const size = parseSize(component.radioSize ?? component.width ?? 24, scaleFactor) ?? 24;
  const activeFill = parseColor(component.activeFillColor ?? component.fillColor) ?? '#007AFF';
  const inactiveFill = parseColor(component.inactiveFillColor) ?? 'transparent';
  const activeBorder = parseColor(component.activeBorderColor) ?? activeFill;
  const inactiveBorder = parseColor(component.inactiveBorderColor ?? component.borderColor) ?? '#ccc';
  const activeBorderWidth = parseSize(component.activeBorderWidth ?? component.borderWidth ?? 2, scaleFactor) ?? 2;
  const inactiveBorderWidth = parseSize(component.inactiveBorderWidth ?? component.borderWidth ?? 2, scaleFactor) ?? 2;
  const innerPadding = parseSize(component.innerPadding ?? 0, scaleFactor) ?? 0;

  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
  const shadow = selected && component.dropShadow ? shadowStyles({ ...component, dropShadow: component.dropShadow } as any) : {};

  return (
    <View style={containerStyle}>
      <View
        style={[
          styles.outer,
          {
            width: size,
            height: size,
            borderRadius: size / 2,
            borderColor: selected ? activeBorder : inactiveBorder,
            borderWidth: selected ? activeBorderWidth : inactiveBorderWidth,
            padding: innerPadding,
          },
          shadow,
        ]}
      >
        <View
          style={[
            styles.inner,
            {
              backgroundColor: selected ? activeFill : inactiveFill,
              borderRadius: (size - innerPadding * 2) / 2,
            },
          ]}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  outer: { borderWidth: 2, justifyContent: 'center', alignItems: 'center' },
  inner: {},
});