import React, {useMemo} from 'react';
import {StyleSheet, View} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import BackButton from '@components/BackButton';
import Text from '@components/Text';
import {
  formatFormTitle,
  getAgentStatus,
  getStatusText,
} from '@modules/form/utils';
import {getColor} from '@modules/form/screens/FormChatDetail/utils';
import {FormStepType, FormType} from '@modules/form/interfaces';
import {useAppSelector} from '@redux/utils';
import {BORDER_RADIUS, SPACING} from '@shared/theme';
import {COLORS} from '@shared/colors';

import {ChatFormActionButton} from '../ChatFormActionButton';
import FormIcon from '../FormIcon';

const AVATAR_SIZE = 52;

export const CLOSED_FORMS_STATUS = [
  FormStepType.CANCELLED,
  FormStepType.CLOSED,
  FormStepType.QUALIFIED,
];

interface Props {
  isResponsible?: boolean;
}

export function ChatFormHeader({isResponsible}: Props) {
  const {top} = useSafeAreaInsets();
  const currentForm = useAppSelector(({chats}) => chats.forms.currentForm);
  const isForm = currentForm?.form.type === FormType.FORM;
  const showActionButton =
    currentForm &&
    !CLOSED_FORMS_STATUS.includes(currentForm.status) &&
    isResponsible;
  const [statusText, statusColor] = useMemo(() => {
    if (!currentForm) {
      return [null, COLORS.DARK_GRAY_THREE];
    }

    const formStatus = currentForm.form.needApproval
      ? getAgentStatus({
          approvalStatus: currentForm.status,
          formStatus: currentForm.status,
          needApproval: currentForm.form.needApproval,
        })
      : currentForm.form.approvalStatus;

    return [
      getStatusText({
        option: formStatus,
        withInProgressStatus: currentForm.form.withInProgressStatus,
      }),
      getColor(formStatus),
    ];
  }, [currentForm]);

  return (
    <View style={[styles.container, !!top && {paddingTop: top}]}>
      <BackButton />
      {!!currentForm && (
        <>
          <View style={styles.leftContent}>
            <View style={[styles.avatar, isForm && styles.avatarBackground]}>
              <FormIcon
                type={currentForm.form.type}
                stepsType={currentForm.form.stepsType}
                style={styles.formIcon}
                iconSize={24}
              />
              <Text
                numberOfLines={1}
                adjustsFontSizeToFit
                variant="caption"
                minimumFontScale={0}
                align="center"
                style={styles.formId}>
                ID {currentForm.form.id}
              </Text>
            </View>
          </View>
          <View style={styles.midContent}>
            <Text
              variant="subtitle1"
              numberOfLines={1}
              maxFontSizeMultiplier={1}>
              {formatFormTitle(currentForm.form.title)}
            </Text>
            {statusText && isForm && (
              <View
                style={[
                  styles.formStateContainer,
                  {backgroundColor: statusColor},
                ]}>
                <Text
                  variant="subtitle2"
                  numberOfLines={1}
                  maxFontSizeMultiplier={1}
                  color={COLORS.WHITE}>
                  {statusText}
                </Text>
              </View>
            )}
          </View>
          {showActionButton && <ChatFormActionButton />}
        </>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: COLORS.WHITE,
    alignItems: 'center',
    gap: SPACING.x1,
    paddingRight: SPACING.x2,
    paddingVertical: SPACING.x1,
    paddingLeft: 0,
    minHeight: 74,
  },
  formId: {paddingHorizontal: 4},
  leftContent: {
    justifyContent: 'center',
  },
  midContent: {
    flex: 1,
    justifyContent: 'space-between',
    paddingVertical: SPACING.x1,
  },
  avatar: {
    alignItems: 'center',
    borderRadius: AVATAR_SIZE / 2,
    justifyContent: 'center',
    width: AVATAR_SIZE,
    height: AVATAR_SIZE,
  },
  avatarBackground: {
    backgroundColor: COLORS.GRAY,
  },
  formIcon: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  formStateContainer: {
    alignSelf: 'flex-start',
    borderRadius: BORDER_RADIUS.m,
    paddingHorizontal: SPACING.x1,
  },
});