import { useEffect } from 'react';

import type { CustomLinksDialogRenderStage } from './types';

import locales from '~/locales/fragments/customLinksDialog';
import { useI18nStatic } from '~/src/lib/i18n';
import { useTracker } from '~/src/lib/tracker/useTracker';
import Box from '../Box';
import Card from '../Card';
import ClickToCopy from '../ClickableCopy';
import { DialogBoxHeader } from '../DialogBox/DialogBoxHeader';
import { FORM_SECTION_SPACING } from '../Form';
import CopyIcon from '../Icon/CopyIcon';
import Loading from '../Loading';
import { useScroller } from '../Scroller2';
import Sticky from '../Sticky';
import Text from '../Text';
import { CustomLinksSection, Section, ServiceLinksSection } from './components';
import { useCustomLinksDialogContext } from './useCustomLinksDialogContext';

export const DefaultStage: CustomLinksDialogRenderStage = ({
  setStage,
  paddingX,
  paddingY,
  close,
}) => {
  const { t } = useI18nStatic<'customLinksDialog'>(locales);
  const scroller = useScroller();
  const { trackEvent } = useTracker();

  const { item, account, accountIsLoading, generalLink } =
    useCustomLinksDialogContext();

  useEffect(() => {
    scroller?.setScrollTop(0);
  }, []);

  return (
    <Box>
      <Sticky top={0} zIndex={1}>
        <DialogBoxHeader title={t('mainTitle')} onCloseClick={close} />
      </Sticky>
      <Box
        flexColumn
        padding={`0 ${paddingX} ${paddingY}`}
        style={{ gap: FORM_SECTION_SPACING }}
      >
        <Section
          value={t('generalLinkSection.title')}
          description={t('generalLinkSection.description')}
        >
          <Card flexRow>
            <label
              htmlFor={generalLink}
              style={{ flexGrow: 1, overflow: 'hidden' }}
            >
              <Text
                testId="defaultShareLink"
                withEllipsis
                size="1.7rem"
                padding="1.4rem 1.2rem"
                style={{ cursor: 'pointer' }}
              >
                {generalLink}
              </Text>
            </label>
            <ClickToCopy
              id={generalLink}
              value={generalLink}
              isInline
              noFlexShrink
              padding="0 1rem"
              withHoverOpacityFrom={0.4}
              toastText={t('linkCopied')}
              onClick={() => {
                trackEvent({
                  type: 'link-copied',
                  linkType: 'general',
                });
              }}
            >
              <CopyIcon color="#fff" />
            </ClickToCopy>
          </Card>
        </Section>
        {(() => {
          if (accountIsLoading || !account) {
            return <Loading height="5rem" />;
          }

          return (
            <Box flexColumn style={{ gap: FORM_SECTION_SPACING }}>
              <CustomLinksSection
                account={account}
                setStage={setStage}
                customLinks={item.customLinks?.filter(
                  ({ redirectTo }) => !redirectTo
                )}
              />
              <ServiceLinksSection
                account={account}
                setStage={setStage}
                serviceLinks={item.customLinks?.filter(({ redirectTo }) =>
                  Boolean(redirectTo)
                )}
              />
            </Box>
          );
        })()}
      </Box>
    </Box>
  );
};