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 { SelectedPrerelease } from '~/src/store/prereleases/types';

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 { SaveButton } from '~/src/components/SaveButton';
import Sticky from '~/src/components/Sticky';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import { useI18n } from '~/src/lib/i18n';
import { updatePrereleaseAction } from '~/src/store/prereleases/actions/update';
import { useDispatch } from '~/src/store/redux';

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

interface EditDetailsDialogProps {
  onSave?(): void;
  onClose(): void;
  prerelease: SelectedPrerelease;
  focusOnField?: 'releaseIdentifier';
}

const EditDetailsDialog = ({
  onSave,
  onClose,
  prerelease,
  focusOnField,
}: EditDetailsDialogProps) => {
  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 =
    focusOnField &&
    !prerelease.sourceUpc &&
    !prerelease.sourceIsrc &&
    !prerelease.sourceUrl;

  useEffect(() => {
    if (focusOnField) {
      formApiRef.current?.scrollTo({
        name: focusOnField,
        delay: DIALOG_TRANSITION_DURATION,
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  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 }) => (
                    <SaveButton
                      {...textProps}
                      onSave={async () => {
                        await formApiRef.current?.submit();
                      }}
                    />
                  )}
                />
              </Sticky>
              <div
                style={{
                  padding: `3px ${paddingX} ${paddingY}`,
                  overflow: 'hidden',
                }}
              >
                <PrereleaseMetadataForm
                  apiRef={formApiRef}
                  isAdvancedSettingsEnabled={false}
                  isReleaseTimezoneEnabled
                  config={{
                    albumName: { initialValue: prerelease.name },
                    releaseDate: { initialValue: prerelease.releaseDate },
                    releaseTimezone: {
                      initialValue: prerelease.releaseTimezone,
                    },
                    upc: {
                      initialValue: prerelease.sourceUpc,
                      errors: shouldShowError ? { empty: ' ' } : undefined,
                    },
                    isrc: {
                      initialValue: prerelease.sourceIsrc,
                      errors: shouldShowError ? { empty: ' ' } : undefined,
                    },
                    url: {
                      initialValue: prerelease.sourceUrl,
                      errors: shouldShowError ? { empty: ' ' } : undefined,
                    },
                    serviceLinks: { initialValue: prerelease.sourceLinks },
                  }}
                  onSubmit={async ({
                    metadataChanges,
                    lookupConfigChanges,
                  }) => {
                    debug('on submit', {
                      metadataChanges,
                      lookupConfigChanges,
                    });

                    if (metadataChanges || lookupConfigChanges) {
                      try {
                        await dispatch(
                          updatePrereleaseAction({
                            id: prerelease.id,
                            data: {
                              name: metadataChanges?.name,
                              releaseDate: metadataChanges?.releaseDate,
                              releaseTimezone: metadataChanges?.releaseTimezone,
                              sourceUpc: lookupConfigChanges?.upc,
                              sourceIsrc: lookupConfigChanges?.isrc,
                              sourceUrl: lookupConfigChanges?.url,
                              sourceLinks: lookupConfigChanges?.links,
                            },
                          })
                        );

                        onSave?.();

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

                        return;
                      }
                    }

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

export default EditDetailsDialog;