import { useCallback } from 'react';
import noop from 'lodash-es/noop';

import type { PageSectionComponent } from '../types';
import type { NewsletterSectionProps } from './types';

import Box from '~/src/components/Box';
import OutlineButton from '~/src/components/Button/OutlineButton';
import InputLabel from '~/src/components/InputLabel';
import { MarketingConsent } from '~/src/components/MarketingConsent';
import TextInput from '~/src/components/TextInput';
import { useI18n } from '~/src/lib/i18n';
import { resolveArtistName } from '~/src/lib/utils/resolveArtistName';
import { useSelector } from '~/src/store/redux';
import { selectUserCountry } from '~/src/store/session/selectors';
import { MAX_CONTENT_WIDTH } from '../../constants';
import { useEditActions } from '../../ItemPageEdit/useEditActions';
import { EditWrapper } from '../lib/EditWrapper';
import SectionTitle from '../lib/SectionTitle';
import { NewsletterLegalFootnote } from './components';

const NewsletterSectionEdit: PageSectionComponent<NewsletterSectionProps> = ({
  layoutData,
  sectionPath,
  title,
  ...boxProps
}) => {
  const { t: tApp } = useI18n('app');
  const { t } = useI18n('itemEdit');

  const userCountry = useSelector(selectUserCountry);
  const { updateLayoutSection } = useEditActions();
  const { item } = layoutData;
  const artistName = resolveArtistName(item);

  return (
    <Box testId="newsletterSectionEdit" {...boxProps}>
      <EditWrapper
        padding="1.6rem 1rem 2rem"
        sectionPath={sectionPath}
        renderSettingsContent={useCallback(
          () => (
            <InputLabel value={t('labels.componentTitle')}>
              <TextInput
                testId="newsletterSectionTitleInput"
                defaultValue={title}
                onChange={({ value }) => {
                  updateLayoutSection({
                    sectionPath,

                    changedProps: {
                      title: value,
                    },
                  });
                }}
              />
            </InputLabel>
          ),
          [title, updateLayoutSection]
        )}
      >
        <SectionTitle text={title} minHeight="3.5rem" isSticky={false} />
        <Box isCentered maxWidth={MAX_CONTENT_WIDTH}>
          <Box style={{ position: 'relative', overflow: 'hidden' }}>
            <MarketingConsent
              title=""
              artistName={artistName}
              country={userCountry}
              checkboxesConfig={{ emailMarketing: { isRequired: true } }}
              onSubmit={noop}
              renderFooter={({ render }) =>
                render(
                  <>
                    <OutlineButton
                      isSubmit
                      height="5rem"
                      text={tApp('actions.subscribe')}
                    />
                    <NewsletterLegalFootnote
                      artistName={artistName}
                      country={userCountry}
                      brand={item.primaryOwnerAccount?.orchardBrand}
                    />
                  </>
                )
              }
            />
          </Box>
        </Box>
      </EditWrapper>
    </Box>
  );
};

export default NewsletterSectionEdit;