import {createContext, useCallback, useContext, useMemo, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Typography, Dialog} from '@components';

interface ContextValue {
  showDialog: () => void;
  hideDialog: () => void;
}

const initialState: ContextValue = {
  showDialog: () => {},
  hideDialog: () => {},
};

const DialogAIContext = createContext<ContextValue>(initialState);

export function DialogAIMessageProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [isVisible, setIsVisible] = useState(false);
  const {t} = useTranslation();

  const showDialog = useCallback(() => {
    setIsVisible(true);
  }, []);

  const hideDialog = useCallback(() => {
    setIsVisible(false);
  }, []);

  const values = useMemo(() => {
    return {
      showDialog,
      hideDialog,
    };
  }, [showDialog, hideDialog]);

  return (
    <>
      <DialogAIContext.Provider value={values}>
        {children}
      </DialogAIContext.Provider>
      <Dialog
        isVisible={isVisible}
        onClose={hideDialog}
        title={t('chat.voicenote_ceo.ai_generated_msg_info_dialog.title')}
        footer={{
          primaryButton: {
            text: t('general.ok'),
            onPress: hideDialog,
          },
        }}>
        <Typography>
          {t('chat.voicenote_ceo.ai_generated_msg_info_dialog.description')}
        </Typography>
      </Dialog>
    </>
  );
}

export const useAiMessageDialog = () => {
  return useContext(DialogAIContext);
};
