import { useCallback, useEffect, useRef } from 'react';
import Debug from 'debug';

import type { DialogBoxApi } from '~/src/components/DialogBox';
import type { FormApi } from '~/src/components/Form';
import type { SelectedAlbum } from '~/src/store/albums/types';
import type { FC } from 'react';

import Clickable from '~/src/components/Clickable';
import DialogBox, {
  DIALOG_TRANSITION_DURATION,
} from '~/src/components/DialogBox';
import { DialogBoxHeader } from '~/src/components/DialogBox/DialogBoxHeader';
import { useAppAlert, useAppToast } from '~/src/components/NextApp/lib/CoreUi';
import { PrereleaseMetadataForm } from '~/src/components/PrereleaseMetadataForm';
import Sticky from '~/src/components/Sticky';
import Text from '~/src/components/Text';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { useI18n } from '~/src/lib/i18n';
import { patchAlbumLookupConfig } from '~/src/store/albums/actions/lookupConfig';
import { patchAlbum } from '~/src/store/albums/actions/patch';
import { useDispatch } from '~/src/store/redux';

const debug = Debug('songwhip/EditDetailsDialog');

const EditDetailsDialog: FC<{
  onSave?(): void;
  onClose(): void;
  album: SelectedAlbum;
  isFromBanner?: boolean;
}> = ({ onSave, onClose, album, isFromBanner = false }) => {
  const dialogBoxRef = useRef<DialogBoxApi>(null);
  const formApiRef = useRef<FormApi>(null);
  const close = () => dialogBoxRef.current?.close({});
  const isLargeScreen = useIsLargeScreen();
  const appToast = useAppToast();
  const appAlert = useAppAlert();
  const dispatch = useDispatch();
  const { t } = useI18n();

  const shouldShowError =
    isFromBanner &&
    !album.upc &&
    !album.lookupConfig?.upc &&
    !album.lookupConfig?.isrc &&
    !album.lookupConfig?.url;

  useEffect(() => {
    if (isFromBanner) {
      formApiRef.current?.scrollTo({
        name: 'releaseIdentifier',
        delay: DIALOG_TRANSITION_DURATION,
      });
    }
  }, []);

  const formDisabled = typeof album.catalogProductId !== 'undefined';

  return (
    <DialogBox
      apiRef={dialogBoxRef}
      onClose={onClose}
      fillViewport={!isLargeScreen}
      testId="editDetailsDialog"
      renderContent={useCallback(
        ({ paddingY, paddingX }) => {
          return (
            <>
              <Sticky>
                <DialogBoxHeader
                  withShadow
                  title={t('item.labels.editAlbumDetails')}
                  onCloseClick={close}
                  renderRight={({ textProps }) => (
                    <Clickable
                      testId="saveButton"
                      onClick={() => formApiRef.current?.submit()}
                    >
                      <Text {...textProps}>{t('app.actions.save')}</Text>
                    </Clickable>
                  )}
                />
              </Sticky>
              <div
                style={{
                  padding: `3px ${paddingX} ${paddingY}`,
                  overflow: 'hidden',
                }}
                onClick={() => {
                  if (formDisabled) {
                    appAlert({
                      content: t('item.orchardReleaseDetailsDisabled'),
                    });
                  }
                }}
              >
                <PrereleaseMetadataForm
                  apiRef={formApiRef}
                  isDisabled={formDisabled}
                  config={{
                    albumName: { initialValue: album.name },
                    releaseDate: { initialValue: album.releaseDate },
                    upc: {
                      initialValue: album.lookupConfig?.upc ?? album.upc,
                      errors: shouldShowError ? { empty: ' ' } : undefined,
                    },
                    isrc: {
                      initialValue: album.lookupConfig?.isrc,
                      errors: shouldShowError ? { empty: ' ' } : undefined,
                    },
                    url: {
                      initialValue: album.lookupConfig?.url,
                      errors: shouldShowError ? { empty: ' ' } : undefined,
                    },
                    serviceLinks: { initialValue: album.lookupConfig?.links },
                  }}
                  onSubmit={async ({
                    metadataChanges,
                    lookupConfigChanges,
                  }) => {
                    debug('on submit', {
                      metadataChanges,
                      lookupConfigChanges,
                    });

                    if (metadataChanges || lookupConfigChanges) {
                      try {
                        if (metadataChanges) {
                          await dispatch(
                            patchAlbum({
                              albumId: album.id,
                              showToastOnError: false,
                              changes: metadataChanges,
                            })
                          );
                        }

                        if (lookupConfigChanges) {
                          await dispatch(
                            patchAlbumLookupConfig({
                              albumId: album.id,
                              showToastOnError: false,
                              config: lookupConfigChanges,
                            })
                          );
                        }

                        onSave?.();

                        appToast({
                          text: t('item.events.changesSaved'),
                        });
                      } catch (error) {
                        appAlert({
                          title: t('item.events.updateError'),
                          content: error.message,
                        });

                        return;
                      }
                    }

                    close();
                  }}
                />
              </div>
            </>
          );
        },
        [album]
      )}
    />
  );
};

export default EditDetailsDialog;