import { type ReactNode } from 'react';

import type { SelectedCustomPage } from '~/src/store/types';

import { ItemTypes } from '~/lib/types';
import Box from '~/src/components/Box';
import Clickable from '~/src/components/Clickable';
import usePublishDraft from '~/src/components/ItemPage/hooks/usePublishDraftPage';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';

interface CustomPageToolbarProps {
  customPage: SelectedCustomPage;
  height: string;
}

export const CustomPageToolbar = ({
  customPage,
  height,
}: CustomPageToolbarProps) => {
  const publishDraft = usePublishDraft(ItemTypes.CUSTOM_PAGE);
  const { t } = useI18n();

  if (!customPage.userCanEdit) return null;

  const renderContent = (content: ReactNode) => (
    <Box
      testId="customPageBanner"
      positionRelative
      zIndex={1}
      flexColumn
      alignCenter
      height={height}
      pointerEvents="all"
      style={{ backgroundColor: 'rgba(51, 51, 51, 0.9)', color: '#fff' }}
    >
      {content}
    </Box>
  );

  if (customPage.isDraft) {
    return renderContent(
      <Box positionRelative flexRow alignEnd alignCenter padding="0 2.2rem">
        <Text
          positionAbsolute
          top="50%"
          left="50%"
          size="1.4rem"
          style={{ transform: 'translate(-50%, -50%)' }}
        >
          {t('item.draftHeaderText')}
        </Text>
        <Clickable
          testId="publishDraft"
          isInline
          title={t('item.publishDraftAction')}
          onClick={() => {
            publishDraft({
              itemId: customPage.id,
              itemName: customPage.name,
              pagePath: customPage.pagePath,
            });
          }}
        >
          <Text bold padding="1rem 0" size="1.7rem">
            {t('item.publishDraftAction')}
          </Text>
        </Clickable>
      </Box>
    );
  }

  return null;
};