import PropTypes from 'prop-types';
import classnames from 'classnames';
import useResponsiveValues from "../../../hooks/breakpoint/useResponsiveValues/index.js";
import { useIsComplianceLocation } from "../../../hooks/tracking/index.js";
import CustomPropTypes from "../../../utils/prop-types/index.js";
import cx from "../../../utils/css/cx.js";
import customizable from "../../../utils/css/customizable.js";
import getMarginClasses from "../../../utils/css/getMarginClasses.js";
import getColor from "../../../utils/colors/getColor.js";
import Well from "../../layout/Well/index.js";
import Grid from "../../layout/Grid/index.js";
import GridItem from "../../layout/GridItem/index.js";
import Block from './Block';
import classes from './styles.module.scss';

/**
 * A standard footer to include at the bottom of a custom POLITICO interactive
 * story. This is generally used to include some legal disclaimers, a copyright
 * notice, and whatever additional credits or disclaimers are necessary for the
 * project. The "Legal Stuff" block is included by default, as is the copyright
 * notice, though you can disable the legal block and customize the copyright
 * notice with props.
 *
 * ```js
 *
 * import { InteractiveFooter } from '@politico/interactive-style';
 * ```
 */
const InteractiveFooter = props => {
  const {
    content,
    copyrightYear,
    copyright: customCopyright,
    disableLegalBlock,
    legalBlockTitle,
    margin,
    bg,
    fg,
    linksExternal
  } = props;
  const isComplianceLocation = useIsComplianceLocation();
  const marginValue = useResponsiveValues(margin);
  const margins = getMarginClasses(marginValue, {
    defaultSide: 't',
    sides: ['t']
  });
  const numBlocks = content.length + (disableLegalBlock ? 0 : 1);
  const copyright = customCopyright || `© ${copyrightYear} POLITICO LLC`;
  const linkTarget = linksExternal ? '_blank' : undefined;
  return <footer className={cx(customizable('InteractiveFooter'), classes.footer, margins)} style={{
    '--InteractiveFooter-bg': getColor(bg),
    '--InteractiveFooter-fg': getColor(fg)
  }}>
      <div className={cx(customizable('InteractiveFooter__content'), classes.content)}>
        <Well>
          <Grid>
            {content.map(a => <Block key={a.title} title={a.title} description={a.description} fullWidth={a.fullWidth || numBlocks === 1} content={a.children} descriptionContent={a.descriptionContent} linksExternal={linksExternal} />)}

            {!disableLegalBlock && <Block title={legalBlockTitle} fullWidth={numBlocks === 1} linksExternal={linksExternal} descriptionContent={<div>
                    <a href="https://www.politico.com/terms-of-service" target={linkTarget} className={classes.legalLink}>
                      Terms of Service
                    </a>
                    <a href="https://www.politico.com/privacy-policy" target={linkTarget} className={classes.legalLink}>
                      Privacy Policy
                    </a>
                    <a href="#" data-show-on-geo="CA,CO,CT,VA" className={classnames('ot-sdk-show-settings', classes.legalLink, {
              [classes.hidden]: !isComplianceLocation
            })}>
                      Do Not Sell or Share My Personal Information and Opt Out
                      of Targeted Advertising
                    </a>
                  </div>} />}
          </Grid>

          <Grid>
            <GridItem margin={{
            t: '6'
          }}>
              <div className={cx(customizable('InteractiveFooter__copyright'))}>
                {copyright}
              </div>
            </GridItem>
          </Grid>
        </Well>

      </div>
    </footer>;
};
InteractiveFooter.defaultProps = {
  content: [],
  copyrightYear: 2023,
  copyright: undefined,
  disableLegalBlock: false,
  legalBlockTitle: 'Legal',
  margin: '8',
  bg: undefined,
  fg: undefined,
  linksExternal: true
};
InteractiveFooter.propTypes = {
  /**
   * The blocks of content to include as sections in the footer. The standard
   * block contains a title and a Markdown-formatted description. The title
   * of each block is used as its key, so all titles must be unique. An
   * individual block can be flagged as `fullWidth` if it should span both
   * footer columns on desktop. Finally, a block can specify `children`, which
   * is used as the block's content instead of the basic title/description.
   * Specify `children` if you want to take full custom control of the block's
   * content. Note that even if you specify `children`, the block must still
   * have a unique `title` for use as a key.
   */
  content: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string.isRequired,
    description: PropTypes.string,
    fullWidth: PropTypes.bool,
    children: PropTypes.node,
    descriptionContent: PropTypes.node
  })),
  /**
   * The year to use in the copyright at the bottom of the footer. This should
   * match the last year the project was published or updated.
   */
  copyrightYear: PropTypes.node,
  /**
   * The `copyright` replaces the default copyright notice entirely with
   * a custom block of content.
   */
  copyright: PropTypes.node,
  /**
   * Prevent the standard legal block from being included in the footer. Set
   * this to `true` if you want to include the legal stuff in your own content
   * directly.
   */
  disableLegalBlock: PropTypes.bool,
  /**
   * Customize the title of the "Legal" block.
   */
  legalBlockTitle: PropTypes.string,
  /**
   * The top margin of the footer. The margin can be specified as one spacing
   * value or as an explicit `t` value. The value corresponds to levels of our
   * spacing scale (e.g., `"4"` corresponds to `$spacing-4`). Note that the
   * footer only supports a custom top margin. You can also provide
   * a responsive value; see [our guide on our standard styling props][utility]
   * for more details.
   *
   * [utility]: ./?path=/docs/guides-how-we-handle-styles--page#standard-styling-props
   */
  margin: CustomPropTypes.responsive(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    t: PropTypes.string
  })])),
  /**
   * Sets the background color of the footer, which is `$altblack-90` by
   * default. This prop accepts either a color name provided by this library or
   * a CSS color value.
   */
  bg: PropTypes.string,
  /**
   * Sets the foreground color of the footer, which is `white` by default. This
   * prop accepts either a color name provided by this library or a CSS color
   * value.
   */
  fg: PropTypes.string,
  /**
   * Sets to `false` to open links in the same window
   */
  linksExternal: PropTypes.bool
};
export default InteractiveFooter;