/* eslint-disable @typescript-eslint/no-explicit-any */
import { useCallback, useEffect, useMemo } from "react";
import { handleValidateCheck } from "../PublicSector/InvalidMessage/utils";
import React from "react";
import { View, StyleSheet } from 'react-native';
import { Checkbox, Text } from 'react-native-paper';
import { getStyleMap } from "@/utils/getStyleMap";
import { InvalidMessageNative } from "../PublicSector/InvalidMessageNative";

export const CheckboxContainerNative = ({
  disabled = false,
  isClassTrue = true,
  trueClasses = [],
  falseClasses = [],
  value = false,
  handleUpdateDsl,
  updateComponentRuntimeProps,
  deleteComponentRuntimeProps,
  label = "Check",
  context,
  required = false,
  customRule,
  triggerEventHandler,
  hideValidationMessage,
  validateMessage,
  colorScheme
}: any) => {
  const getValidateMessage = useCallback(
    (value?: unknown) => {
      if (!hideValidationMessage) {
        const message = handleValidateCheck({
          value,
          required,
          customRule,
        });
        const showMessage = message && message.length > 0;
        return showMessage ? message : "";
      }
      return "";
    },
    [customRule, hideValidationMessage, required]
  );
  const handleValidate = useCallback(
    (value?: unknown) => {
      const message = getValidateMessage(value);
      handleUpdateDsl({
        validateMessage: message,
      });
      return message;
    },
    [getValidateMessage, handleUpdateDsl]
  );
  const changeValue = (value?: unknown) => {
    new Promise((resolve) => {
      const message = getValidateMessage(value);
      handleUpdateDsl({
        validateMessage: message,
        value: value,
      });
      resolve(true);
    }).then(() => {
      handleOnChange?.();
    });
  };
  const handleOnChange = useCallback(() => {
    triggerEventHandler("change");
  }, [triggerEventHandler]);
  useEffect(() => {
    updateComponentRuntimeProps({
      setValue: (value: any) => {
        handleUpdateDsl({ value });
      },
      clearValue: () => {
        handleUpdateDsl({ value: undefined });
      },
      validate: () => {
        return handleValidate(value);
      },
      clearValidation: () => { },
    });
    return () => {
      deleteComponentRuntimeProps();
    };
  }, [
    deleteComponentRuntimeProps,
    handleUpdateDsl,
    handleValidate,
    updateComponentRuntimeProps,
    value,
  ]);

  const styles = useMemo(() => {
    return getStyleMap(trueClasses, falseClasses, true, context);
  }, [trueClasses, falseClasses, isClassTrue, context]);

  const flattenedStyles = StyleSheet.flatten(styles) || {}

  return (
    <>
      <View style={{ ...flattenedStyles, display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
        <Checkbox
          status={value ? "checked" : "unchecked"}
          disabled={disabled}
          onPress={() => changeValue(!value)}
          color={colorScheme}
          
        />
        <Text>{label}</Text>
      </View>

      {!hideValidationMessage && (
        <View style={flattenedStyles}>
          <View style={{ marginTop: -10, marginLeft: 5 }}>
            <InvalidMessageNative validateMessage={validateMessage} />
          </View>
        </View>
      )}
    </>
  );
};

CheckboxContainerNative.displayName = "CheckboxContainerNative";

