// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import React, { useState } from 'react';
import { Modal } from './Modal';
import { ConfirmationDialog } from './ConfirmationDialog';
import type { PropsType as ProfileEditorPropsType } from './ProfileEditor';
import { ProfileEditor, EditState } from './ProfileEditor';
import type { ProfileDataType } from '../state/ducks/conversations';

export type PropsDataType = {
  hasError: boolean;
};

type PropsType = {
  myProfileChanged: (
    profileData: ProfileDataType,
    avatarBuffer?: Uint8Array
  ) => unknown;
  toggleProfileEditor: () => unknown;
  toggleProfileEditorHasError: () => unknown;
} & PropsDataType &
  Omit<ProfileEditorPropsType, 'onEditStateChanged' | 'onProfileChanged'>;

export const ProfileEditorModal = ({
  hasError,
  i18n,
  myProfileChanged,
  onSetSkinTone,
  toggleProfileEditor,
  toggleProfileEditorHasError,
  ...restProps
}: PropsType): JSX.Element => {
  const ModalTitles = {
    None: i18n('ProfileEditorModal--profile'),
    ProfileName: i18n('ProfileEditorModal--name'),
    Bio: i18n('ProfileEditorModal--about'),
  };

  const [modalTitle, setModalTitle] = useState(ModalTitles.None);

  if (hasError) {
    return (
      <ConfirmationDialog
        cancelText={i18n('Confirmation--confirm')}
        i18n={i18n}
        onClose={toggleProfileEditorHasError}
      >
        {i18n('ProfileEditorModal--error')}
      </ConfirmationDialog>
    );
  }

  return (
    <>
      <Modal
        hasStickyButtons
        hasXButton
        i18n={i18n}
        onClose={toggleProfileEditor}
        title={modalTitle}
      >
        <ProfileEditor
          {...restProps}
          i18n={i18n}
          onEditStateChanged={editState => {
            if (editState === EditState.None) {
              setModalTitle(ModalTitles.None);
            } else if (editState === EditState.ProfileName) {
              setModalTitle(ModalTitles.ProfileName);
            } else if (editState === EditState.Bio) {
              setModalTitle(ModalTitles.Bio);
            }
          }}
          onProfileChanged={(profileData, avatarBuffer) => {
            myProfileChanged(profileData, avatarBuffer);
          }}
          onSetSkinTone={onSetSkinTone}
        />
      </Modal>
    </>
  );
};