// @flow
import React, { useCallback } from 'react';
import styled from 'styled-components';
import type { RadioProps, RadioOptionProp } from './radio-options.proptypes';
import { Box } from '../../primitives';
import { UnstyledButton } from '../../core/behaviors';
import { Span, Text } from '../../core/typography';
import { FormInput } from '../../core/forms/internals/form-input';
import { RadioOption as RadioOptionIcon } from './icon';
import { FieldLabel } from '../../core/typography/field-label';
import { FormList } from '../../core/forms/form-list';
import { useDeprecationWarning } from '../../utils/use-deprecation-warning.hook';

const BorderlessFormInput = styled(FormInput)`
  border: 0;
  padding: 0;
`;

const BaseRadioOption = ({
  id,
  selected,
  text,
  onClick,
  description,
  freeForm,
}: RadioOptionProp) => {
  const onOptionClick = useCallback(() => {
    onClick(id);
  }, [onClick, id]);

  const onTextChange = useCallback(
    (value) => {
      if (freeForm && freeForm.onChange) {
        freeForm.onChange(value);
      }
    },
    [freeForm],
  );

  return (
    <Box>
      <UnstyledButton
        style={{ width: '100%', outline: 'none' }}
        onClick={onOptionClick}
      >
        <Box
          stacked="row"
          align="center"
          justify="space-between"
          spacing={['pr1', 'pl3']}
        >
          <Box stacked="column" align="start" spacing="pv2">
            <Span
              face="sans"
              colorName="greyscale-black"
              fontSize="f3"
              bold
              spacing={['m0', 'p0']}
            >
              {text}
            </Span>

            {description !== undefined ? (
              <Box spacing="mt1">
                <Text fontSize="f1" spacing="mb0" colorName="greyscale-black">
                  {description}
                </Text>
              </Box>
            ) : null}
          </Box>
          <RadioOptionIcon selected={selected} />
        </Box>
      </UnstyledButton>

      {freeForm ? (
        <Box spacing={['mb1', 'pl3', 'pt1']}>
          <BorderlessFormInput
            placeholder={freeForm.placeholder}
            value={freeForm.value}
            onChange={onTextChange}
            large
            aria-label={freeForm.placeholder}
          />
        </Box>
      ) : null}
    </Box>
  );
};

export const RadioOptions = ({
  label,
  selectedId,
  options,
  onClick,
}: RadioProps) => {
  useDeprecationWarning('RadioOptions', undefined, 'Selector');
  return (
    <Box>
      <FieldLabel>{label}</FieldLabel>

      <FormList
        items={options.map((option) => (
          <BaseRadioOption
            id={option.id}
            key={option.id}
            text={option.text}
            selected={option.id === selectedId}
            description={option.description}
            freeForm={option.freeForm}
            onClick={onClick}
          />
        ))}
      />
    </Box>
  );
};

RadioOptions.displayName = 'RadioOptions';
