import React, { useCallback, useEffect } from 'react';
import { Switch, View } from 'react-native';
import { usePaywallContext } from '../../context/PaywallContext';
import { applyStyles, parseColor } from '../../utils/styles';
import { handleAction } from '../../utils/actionHandler';

interface Props {
  component: any;
  scaleFactor: number;
  onClose?: () => void;
  parentDirection?: string;
}

export const NamiToggleSwitch: React.FC<Props> = ({ component, scaleFactor, onClose, parentDirection }) => {
  const ctx = usePaywallContext();
  const formId = component.formId ?? component.id ?? '';
  const isOn = !!ctx.state.formStates?.[formId];

  useEffect(() => {
    if (!formId) return;
    if (ctx.state.formStates?.[formId] === undefined) {
      ctx.setFormState(formId, !!component.checked);
    }
  }, [formId, ctx, component.checked]);

  const onValueChange = useCallback((val: boolean) => {
    ctx.setFormState(formId, val);
    if (component.onTap) {
      handleAction({
        onTap: {
          function: component.onTap.function,
          parameters: {
            ...(component.onTap.parameters ?? {}),
            formId,
            value: val ? 'true' : '',
          },
        },
        ctx,
        onClose,
      });
    }
  }, [formId, ctx, component.onTap, onClose]);

  const containerStyle = applyStyles(component, scaleFactor, false, parentDirection);
  const trackColor = {
    false: parseColor(component.inactivePlateFillColor ?? component.offTrackColor) ?? '#ccc',
    true: parseColor(component.activePlateFillColor ?? component.onTrackColor ?? component.fillColor) ?? '#4CD964',
  };
  const thumbColor = parseColor(isOn
    ? (component.activeHandleFillColor ?? component.thumbColor)
    : (component.inactiveHandleFillColor ?? component.thumbColor)
  ) ?? '#fff';

  return (
    <View style={containerStyle}>
      <Switch
        value={isOn}
        onValueChange={onValueChange}
        trackColor={trackColor}
        thumbColor={thumbColor}
      />
    </View>
  );
};