import React, {memo, useCallback, useMemo, useState} from 'react';
import {Keyboard, Pressable, StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {useMutation} from 'react-query';
import {FormProvider} from 'react-hook-form';
import {useNavigation} from '@react-navigation/native';
import {
  Button,
  Dialog,
  InputClassicController,
  InputTextAreaController,
  Typography,
  HtmlRender,
  getPopupHtml,
} from '@components';
import {Navigation} from '@interfaces/navigation';
import {Topic} from '@interfaces/topics';
import {
  useCreateSupportTicketForm,
  CreateSupportTicketForm,
} from '@modules/chat/hooks';
import {addChat} from '@modules/chat/redux';
import {createTicket} from '@modules/chat/services';
import {Screens} from '@shared/constants';
import {SPACING, useTheme} from '@shared/theme';

interface Props {
  topic: Nullable<Topic>;
  onBack: () => void;
}

export function CreateTicketTab({onBack, topic}: Props) {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const {theme} = useTheme();
  const navigation = useNavigation<Navigation['navigation']>();
  const [showFAQ, setShowFAQ] = useState(false);
  const faqHtml = useMemo(() => {
    return getPopupHtml({
      content: topic!.faq,
    });
  }, [topic]);
  const methods = useCreateSupportTicketForm({
    initialValues: {topicId: topic?.id},
  });
  const {mutate, isLoading} = useMutation(createTicket, {
    onSuccess: response => {
      dispatch(addChat(response));

      navigation.replace(Screens.CHAT_DETAIL, {
        chatId: response.chatId,
      });
    },
  });

  const onCreatePress = (formValues: CreateSupportTicketForm) => {
    mutate(formValues);
  };

  const closeFAQ = useCallback(() => setShowFAQ(false), []);

  const onBackPress = () => {
    methods.reset();
    onBack();
  };

  return (
    <>
      <Pressable onPress={Keyboard.dismiss} style={styles.container}>
        <View style={styles.container}>
          <View style={styles.header}>
            <Button
              variant="flat"
              text={t('general.back')}
              onPress={onBackPress}
            />
            <Typography variant="m" weight="semiBold">
              {t('chats.ticket')}
            </Typography>
            <Button
              variant="flat"
              text={t('general.create')}
              onPress={methods.handleSubmit(onCreatePress)}
              isLoading={isLoading}
            />
          </View>
          <View style={styles.cardContainer}>
            <Button
              variant="secondary"
              text={t('tickets.faq')}
              onPress={() => setShowFAQ(true)}
            />
            <FormProvider {...methods}>
              <InputClassicController
                label={t('tickets.matter')}
                name="subject"
              />
              <InputTextAreaController
                label={t('tickets.your_question')}
                name="firstMessage"
              />
            </FormProvider>
          </View>
        </View>
      </Pressable>
      <Dialog
        isVisible={showFAQ}
        title={t('tickets.faq')}
        onClose={closeFAQ}
        snapPoints={['90%']}
        scrollable
        footer={{
          primaryButton: {
            text: t('general.accept'),
            onPress: closeFAQ,
          },
        }}>
        <HtmlRender
          html={faqHtml}
          onLinkPress={closeFAQ}
          backgroundColor={theme.neutralBg}
        />
      </Dialog>
    </>
  );
}

const styles = StyleSheet.create({
  container: {flex: 1},
  header: {
    padding: SPACING.x2,
    paddingTop: SPACING.x3,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  cardContainer: {
    paddingHorizontal: SPACING.x2,
    gap: SPACING.x2,
  },
  membersTitle: {
    paddingHorizontal: SPACING.x2,
    marginVertical: SPACING.x2,
  },
});

export default memo(CreateTicketTab);