// @flow
/* eslint react/no-array-index-key: 0 */
import React from 'react';
import styled from 'styled-components';
import type { FormListProps } from './form-list.proptypes';
import { FormBox, FormRow } from '../internals/forms.common';
import { getPaletteColor } from '../../../mixins/branding';

const StyledFormBox = styled(FormBox)`
  &:focus-within {
    border-color: ${getPaletteColor('greyscale-light')};
  }
`;

export const FormList = ({
  items,
  spacing,
  grow,
  shrink,
  basis,
  'data-qa': dataQa,
  'data-cy': dataCy,
  id,
  className,
  children,
  ...props
}: FormListProps) => {
  let childrenArray;
  if (Array.isArray(children)) {
    childrenArray = children;
  } else {
    childrenArray = children != null ? [children] : [];
  }
  const rows = items ?? childrenArray;

  return (
    <StyledFormBox
      {...{ spacing, grow, shrink, basis }}
      className={className}
      data-cy={dataCy}
      data-qa={dataQa}
      id={id}
      {...props}
    >
      {rows.map((item, index) => (
        <FormRow key={index} stacked="column" justify="center">
          {item}
        </FormRow>
      ))}
    </StyledFormBox>
  );
};

FormList.displayName = 'FormList';
