import type { PageSectionComponent } from '../types';
import type { PresaveButtonProps } from './PresaveButton';
import type { PresaveButtonsProps } from './types';

import { ItemTypes } from '~/lib/types';
import Box from '~/src/components/Box';
import Text from '~/src/components/Text';
import { useI18n } from '~/src/lib/i18n';
import { useSelector } from '~/src/store/redux';
import { selectUserCountry } from '~/src/store/session/selectors';
import SectionTitle from '../lib/SectionTitle';
import PresaveButton from './PresaveButton';

export interface PresaveButtonsItem {
  type: PresaveButtonProps['type'];
  text?: PresaveButtonProps['text'];
}

const PresaveButtons: PageSectionComponent<PresaveButtonsProps> = ({
  title,
  items,
  withColoredIcons,
  layoutData,
}) => {
  const album = layoutData.item;
  const albumId = layoutData.item.id;
  const userCountry = useSelector(selectUserCountry);
  const { t } = useI18n();

  return (
    <div data-testid="presaveButtons">
      <SectionTitle margin="0 0 2rem" text={title} />
      <Box padding="0 1.2rem">
        {items.map(({ type, text }) => {
          return (
            <PresaveButton
              type={type}
              key={type}
              text={text}
              margin="0 0 1rem"
              withColoredIcon={!!withColoredIcons}
              albumId={albumId}
            />
          );
        })}
      </Box>
      {album.type === ItemTypes.ALBUM && userCountry === 'US' && (
        <Text
          centered
          size="1.2rem"
          lineHeight="1.25em"
          padding="0.6rem 3rem 0"
          color="#aaa"
          letterSpacing={0}
        >
          {t('item.presavePrivacyNotice')}
        </Text>
      )}
    </div>
  );
};

export default PresaveButtons;