import React, { useCallback, useState } from "react";
import { StyleSheet, View } from "react-native";
import { actionExecutor } from "@applicaster/zapp-react-native-utils/actionsExecutor/ActionExecutor";
import {
  AudioPlayerInput,
  VARIANT_NAME_PLAYLIST_INPUT,
} from "./AudioPlayer/Components/Input";
import {
  AudioPlayerButton,
  VARIANT_TEXT_ONLY,
} from "./AudioPlayer/Components/Button";

export type TextInputContentProps = {
  /** Injected by the sheet host; unused for layout (header is owned by ModalComponent). */
  dismiss?: () => void;
  width?: number;
  maxHeight?: number;
  currentRoute?: boolean;
  inputLabel?: string;
  defaultValue?: string;
  buttonLabel: string;
  actions: ActionType[];
  actionContext?: Record<string, any>;
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
    paddingBottom: 8,
  },
  inputWrap: {
    marginTop: 8,
    marginBottom: 24,
  },
});

/**
 * Modal body only — input + submit.
 * Standard dismiss header comes from BottomSheetModalContent / ModalHeader.
 */
export function TextInputContent(props: TextInputContentProps) {
  const {
    inputLabel,
    defaultValue = "",
    buttonLabel,
    actions,
    actionContext,
  } = props;

  const [textValue, setTextValue] = useState(defaultValue);
  const [submitting, setSubmitting] = useState(false);

  const onSubmit = useCallback(async () => {
    if (submitting) {
      return;
    }

    setSubmitting(true);

    try {
      const updatedActions = (actions || []).map((item) => {
        if (item.type === "sendCloudEvent" || item.options?.data) {
          return {
            ...item,
            options: {
              ...item.options,
              data: {
                ...(item.options?.data || {}),
                name: textValue,
              },
            },
          };
        }

        return item;
      });

      if (actionContext) {
        await actionExecutor.handleActions(updatedActions, actionContext);
      } else {
        await actionExecutor.handleActions(updatedActions);
      }

      await actionExecutor.handleAction({ type: "dismissBottomSheet" });
    } finally {
      setSubmitting(false);
    }
  }, [submitting, actions, textValue, actionContext]);

  return (
    <View style={styles.container}>
      <View style={styles.inputWrap}>
        <AudioPlayerInput
          configuration={VARIANT_NAME_PLAYLIST_INPUT}
          data={{
            placeholder: inputLabel || "",
            label: inputLabel,
          }}
          value={textValue}
          onChangeText={setTextValue}
          onClearPress={() => setTextValue("")}
        />
      </View>
      <AudioPlayerButton
        configuration={VARIANT_TEXT_ONLY}
        data={{ title: buttonLabel }}
        onPress={onSubmit}
        disabled={submitting}
      />
    </View>
  );
}