// @flow
import React from 'react';
import styled from 'styled-components';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';
import { iconsAssetsBaseUrl } from '../../../Theme/Vars';

type Props = {
  className?: string,
  children: Node,
  noCircle?: boolean
}

/**
 * This is a reusable component that will style a list passed into it as a child
 * with checkmarks for the bullet points.
 * If anything other than a <ul><li>...</li></ul> type format is passed in,
 * no styling is applied and it behaves as a plain div.
 */


const List = styled.div`
ul {
    list-style-type: circle;
    ${({ noCircle }) => (!noCircle && `list-style-image: url("${iconsAssetsBaseUrl}checkmark-gradient-mobile.svg")`)};
    list-style-position: outside;

    @media ${ApoliticalBrand.breakpoint.onlyScreen.tablet} {
      ${({ noCircle }) => (!noCircle && `list-style-image: url("${iconsAssetsBaseUrl}checkmark-gradient.svg")`)};
    }
    li {
        font-size: 15px;
        line-height: 1.4;
        color: ${ApoliticalBrand.color.charcoal};
        margin-bottom: 8px;
        
        ${({ noCircle }) => (noCircle && `
          margin: 0;
          position: relative;
          left: -20px;
          padding-left: 24px;
          list-style: none;
          background-image: url("${iconsAssetsBaseUrl}/check-mark-16_2x.png");
          background-repeat: no-repeat;
          background-position: left center;
          background-size: 12px;
        `)};        
    
        &:last-child {
          margin-bottom: 0px;
        }
    
        @media ${ApoliticalBrand.breakpoint.onlyScreen.tablet} {
          font-size: 20px;
          line-height: 1.5;
          margin-bottom: 10px;          
          ${({ noCircle }) => (noCircle && `
            padding-left: 30px;
            left: -26px;
            background-image: url("${iconsAssetsBaseUrl}/check-mark-20_2x.png");
            background-size: 16px;
          `)};
        }
    }
}
`;

const CheckmarkList = ({
  className, children, noCircle,
}: Props) => (
  <List className={className} noCircle={noCircle}>
    {children}
  </List>
);

CheckmarkList.defaultProps = {
  className: '',
  noCircle: false,
};

export default CheckmarkList;