import { memo, useCallback } from 'react';
import Debug from 'debug';

import type { ClickableOnClick } from '~/src/components/Clickable';
import type { PageSectionComponent } from '../../types';
import type { CarouselSectionProps } from '../types';

import Box from '~/src/components/Box';
import { useEditActions } from '~/src/components/ItemPage/ItemPageEdit/useEditActions';
import useHash from '~/src/hooks/useHash';
import { useI18n } from '~/src/lib/i18n';
import { EditWrapper } from '../../lib/EditWrapper';
import { toCarouselFrameStyle } from '../constants';
import AddItemButton from './AddItemButton';
import EditCarouselItemDialog from './EditCarouselItemDialog';
import SortableCarouselScroller from './SortableCarouselScroller';

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

const CarouselSectionEdit: PageSectionComponent<CarouselSectionProps> = ({
  items = [],
  sectionPath,
}) => {
  const { hashParams, backToBeforeFirstHash, setHashParam } = useHash();
  const editItemHashParam = `${sectionPath}:edit`;
  const editHashValue = hashParams[editItemHashParam];
  const editItemIndex = editHashValue ? Number(editHashValue) : undefined;
  const itemToEdit = editItemIndex !== undefined && items[editItemIndex];
  const { updateLayoutSection } = useEditActions();
  const { t } = useI18n();

  const onItemClick = useCallback(
    ({ data: index }) => {
      setHashParam({ [editItemHashParam]: index });
    },
    [editItemHashParam]
  );

  return (
    <div data-testid="carouselEdit">
      <EditWrapper padding="1.6rem 1rem 2rem" sectionPath={sectionPath}>
        <CarouselSectionEditContent
          items={items}
          onItemClick={onItemClick}
          sectionPath={sectionPath}
        />
      </EditWrapper>
      {itemToEdit && (
        <EditCarouselItemDialog
          title={t('itemEdit.actions.editItem')}
          item={itemToEdit}
          onSubmit={(itemNext) => {
            const itemsNext = [...items];

            itemsNext[editItemIndex] = {
              ...itemToEdit,
              ...itemNext,
            };

            updateLayoutSection({
              sectionPath,

              changedProps: {
                items: itemsNext,
              },
            });
          }}
          onRemove={async () => {
            const itemsNext = [...items];

            itemsNext.splice(editItemIndex, 1);

            updateLayoutSection({
              sectionPath,

              changedProps: {
                items: itemsNext,
              },
            });
          }}
          onClose={backToBeforeFirstHash}
        />
      )}
    </div>
  );
};

const CarouselSectionEditContent = memo<{
  items: CarouselSectionProps['items'];
  onItemClick: ClickableOnClick<number>;
  sectionPath: string;
}>(({ items, sectionPath, onItemClick }) => {
  const { updateLayoutSection } = useEditActions();

  return (
    <Box margin="0 1.2rem">
      <div
        style={{
          ...toCarouselFrameStyle(),
          marginTop: '3.3rem',
        }}
      >
        <SortableCarouselScroller
          items={items}
          onItemClick={onItemClick}
          onChange={useCallback(
            ({ items }) => {
              debug('order change', items);

              updateLayoutSection({
                sectionPath,

                changedProps: {
                  items,
                },
              });
            },
            [items, updateLayoutSection]
          )}
        />
      </div>
      <AddItemButton
        sectionPath={sectionPath}
        items={items}
        onSubmit={useCallback(() => {}, [])}
      />
    </Box>
  );
});

export default CarouselSectionEdit;