// @flow
import React from 'react';
import styled from 'styled-components';
import type { ClickableListProps } from './clickable-list.proptypes';
import { Box } from '../../../primitives';
import { ChevronRight } from '../../icon';
import { UnstyledButton } from '../../behaviors';
import { FieldLabel, Span } from '../../typography';
import { FormList } from '../form-list';
import { getPaletteColor } from '../../../mixins/branding';

const getBorderRadius = ({ theme, isFirst, isLast }) => {
  if (isFirst) return `${theme.cardBorderRadius} ${theme.cardBorderRadius} 0 0`;
  return isLast
    ? `0 0 ${theme.cardBorderRadius} ${theme.cardBorderRadius}`
    : undefined;
};

const StyledFieldLabel = styled(FieldLabel)`
  && {
    padding-bottom: 14px;
  }
`;

const ListItemButton = styled(UnstyledButton)`
  border-radius: ${getBorderRadius};

  && {
    width: 100%;
    outline: none;
    min-height: 60px;
  }

  &:disabled {
    color: ${getPaletteColor('greyscale-dark')};
  }

  &:hover:not(:disabled):not(:active) {
    background: ${getPaletteColor('background')};
  }
`;

const ClickableListItemIcon = styled.span`
  height: 35px;
  margin: 0 20px 0 0;
  text-align: center;
  width: 35px;
  border-radius: 50%;
  background-color: ${(props) => getPaletteColor(props.backgroundColor)};
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex: 0 0 35px;

  img {
    border-radius: 50%;
    max-width: 100%;
  }
`;

export const ClickableList = ({
  label,
  options,
  onClick,
  disabled,
  spacing,
  className,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  ...props
}: ClickableListProps) => (
  <Box
    spacing={spacing}
    {...props}
    className={className}
    data-cy={dataCy}
    data-qa={dataQa}
    id={id}
  >
    {label != null && <StyledFieldLabel>{label}</StyledFieldLabel>}
    <FormList
      items={options.map((option, i) => (
        <ListItemButton
          insetFocus
          type="submit"
          onClick={() => onClick(option.id)}
          disabled={disabled || option.disabled}
          spacing={['pr1', 'pl3']}
          stacked="row"
          align="center"
          justify="space-between"
          isFirst={i === 0}
          isLast={i === options.length - 1}
        >
          {option.icon ? (
            <Box align="center" stacked="row" justify="space-between" grow={1}>
              <ClickableListItemIcon
                backgroundColor={option.icon.backgroundColor}
              >
                {typeof option.icon.imgSrc === 'string' ? (
                  <img src={option.icon.imgSrc} alt={option.icon.altText} />
                ) : (
                  option.icon.imgSrc
                )}
              </ClickableListItemIcon>
              <Box grow={1}>
                <Span fontSize="f2" bold>
                  {option.text}
                </Span>
              </Box>
            </Box>
          ) : (
            <Span fontSize="f2" bold>
              {option.text}
            </Span>
          )}

          <ChevronRight />
        </ListItemButton>
      ))}
    />
  </Box>
);

ClickableList.displayName = 'ClickableList';
