import React, {useMemo} from 'react';
import {ScrollView, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Accordion, CardContainer, Typography} from '@components';
import {useSafeAreaBottomPadding} from '@hooks/useSafeAreaBottomPadding';
import {Navigation} from '@interfaces/navigation';
import ServiceManagementAnswer from '@modules/serviceManagement/components/ServiceManagementTaskDetailsTab/components/ServiceManagementAnswer';
import {ServiceManagementErrorMessage} from '@modules/serviceManagement/components/ServiceManagementErrorMessage';
import {SPACING, useTheme} from '@shared/theme';
import {Screens} from '@shared/constants';
import {useGetDynamicFormAnswer} from '@shared/dynamicForms';

import SentFormSkeleton from './components/SentFormSkeleton';
import {styles} from './styles';

function ServiceManagementSentForm({
  route: {
    params: {formAnswerId, formAnswerToken, formTag},
  },
}: Navigation<Screens.SERVICE_MANAGEMENT_SENT_FORM>) {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const paddingBottom = useSafeAreaBottomPadding({extra: SPACING.x1});
  const {sentForm, isLoadingFormData} = useGetDynamicFormAnswer({
    formAnswerId,
    formAnswerToken,
    formTag,
  });
  const sectionRowStyle = useMemo(
    () => [
      styles.sectionRow,
      {backgroundColor: theme.background.elements.grey},
    ],
    [theme.background.elements.grey],
  );
  const backgroundStyle = useMemo(
    () => ({backgroundColor: theme.background.layout.default}),
    [theme.background.layout.default],
  );

  if (isLoadingFormData) {
    return (
      <View style={[styles.container, backgroundStyle]}>
        <SentFormSkeleton />
      </View>
    );
  }

  if (!sentForm?.length) {
    return (
      <View style={[styles.container, styles.emptyWrapper, backgroundStyle]}>
        <CardContainer>
          <ServiceManagementErrorMessage
            variant="info"
            avatarSize="md"
            title={t('service_management.empty_form_title')}
            body={t('service_management.empty_form_description')}
            style={styles.emptyMessage}
          />
        </CardContainer>
      </View>
    );
  }

  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      style={[styles.container, backgroundStyle]}
      contentContainerStyle={[styles.content, {paddingBottom}]}>
      {sentForm.map(section => (
        <Accordion key={section.id} initialCollapsed>
          <Accordion.Header>
            <Accordion.Title title={section.title} />
            <Accordion.Icon />
          </Accordion.Header>
          <Accordion.Content>
            {section.components.map(component => (
              <View key={component.nameId} style={sectionRowStyle}>
                <Typography variant="xxs" color={theme.text.neutral.lighter}>
                  {component.content.title}
                </Typography>
                <ServiceManagementAnswer component={component} />
              </View>
            ))}
          </Accordion.Content>
        </Accordion>
      ))}
    </ScrollView>
  );
}

export default ServiceManagementSentForm;