import React, { useContext } from "react";
import styled from "styled-components";
import Text from "../../asorted/Text";
import Flex from "../../layout/Flex";
import { rgba } from "../../../styles/helpers";
import { RadioContext } from "./index";
export const Label = styled(Text) `
  color: ${p => p.disabled
    ? p.theme.colors.neutral.c50
    : p.checked
        ? p.theme.colors.primary.c90
        : p.theme.colors.neutral.c100};
`;
const Container = styled(Flex) `
  cursor: ${p => (p.disabled ? "" : "pointer")};
  justify-content: center;
  align-items: center;
  background-color: ${p => (p.checked ? p.theme.colors.primary.c20 : "")};
  border: 1px solid ${p => (p.checked ? p.theme.colors.primary.c50 : p.theme.colors.neutral.c40)};
  border-radius: ${p => `${p.theme.radii[2]}px`};
  padding: ${p => p.theme.space[6]}px;

  &:hover {
    border-color: ${p => (p.disabled || p.checked ? "" : p.theme.colors.primary.c80)};
  }
`;
const Input = styled.input `
  position: relative;
  appearance: none;
  &:focus ~ ${Container} {
    box-shadow: 0px 0px 0px 4px ${p => rgba(p.theme.colors.primary.c60, 0.48)};
  }
`;
const RadioListElement = styled.label.attrs({ tabIndex: -1 }) `
  display: inline-flex;
  align-items: center;
`;
const ListElement = ({ label, value, disabled, containerProps, ...props }) => {
    const context = useContext(RadioContext);
    if (context === undefined)
        throw new Error("RadioElement must be used within a RadioProvider");
    const isChecked = context.currentValue === value;
    const handleChange = (event) => {
        context.onChange(event.target.value);
    };
    return (React.createElement(RadioListElement, null,
        React.createElement(Input, { type: "radio", checked: isChecked, disabled: disabled, onChange: handleChange, value: value, name: context.name, ...props }),
        React.createElement(Container, { checked: isChecked, disabled: disabled, ...containerProps }, typeof label === "string" ? (React.createElement(Label, { checked: isChecked, disabled: disabled, variant: "paragraph" }, label)) : (React.createElement(label, { checked: isChecked, disabled })))));
};
ListElement.displayName = "Radio.ListElement"; // For easy identification in the React devtools & in storybook
ListElement.Label = Label;
export default ListElement;
//# sourceMappingURL=RadioListElement.js.map