RadioButton

function RadioButtonExample() {
  const [favorite, setFavorite] = React.useState(undefined);
  const [favoriteFood, setFavoriteFood] = React.useState(undefined);

  return (
    <Flex gap={4}>
      <Fieldset legend="What is your favorite pet?">
        <Flex direction="column" gap={2}>
          <RadioButton
            checked={favorite === 'dogs'}
            id="favoriteDog"
            label="Dogs"
            name="favorite"
            onChange={() => setFavorite( 'dogs' )}
            value="dogs"
          />
          <RadioButton
            checked={favorite === 'cats'}
            id="favoriteCat"
            label="Cats"
            name="favorite"
            onChange={() => setFavorite( 'cats' )}
            value="cats"
          />
          <RadioButton
            checked={favorite === 'plants'}
            id="favoritePlants"
            label="Plants"
            name="favorite"
            onChange={() => setFavorite( 'plants' )}
            value="plants"
          />
        </Flex>
      </Fieldset>
      <Fieldset legend="What is your favorite food?">
        <Flex gap={2}>
          <RadioButton
            checked={favoriteFood === 'pizza'}
            id="favoritePizza"
            label="Pizza"
            name="favoriteFood"
            onChange={() => setFavoriteFood( 'pizza' )}
            value="pizza"
          />
          <RadioButton
            checked={favoriteFood === 'curry'}
            id="favoriteCurry"
            label="Curry"
            name="favoriteFood"
            onChange={() => setFavoriteFood( 'curry' )}
            value="curry"
          />
          <RadioButton
            checked={favoriteFood === 'sushi'}
            id="favoriteSushi"
            label="Sushi"
            name="favoriteFood"
            onChange={() => setFavoriteFood( 'sushi' )}
            value="sushi"
          />
        </Flex>
      </Fieldset>
    </Flex>
  );
}

function RadioButtonExample() {
  const [availability, setAvailability] = React.useState(undefined);

  return (
    <Fieldset legend="Which time slot works best for you?">
      <Flex direction="column" gap={2}>
        <RadioButton
          checked={availability === 'monday'}
          id="monday"
          label="Monday"
          subtext="Morning and afternoon"
          name="Availability"
          onChange={() => setAvailability( 'monday' )}
          value="monday"
        />
        <RadioButton
          checked={availability === 'tuesday'}
          id="tuesday"
          label="Tuesday"
          subtext="Morning, afternoon, and evening"
          name="Availability"
          onChange={() => setAvailability( 'tuesday' )}
          value="tuesday"
        />
        <RadioButton
          checked={availability === 'wednesday'}
          id="Wednesday"
          label="Wednesday"
          subtext="Evening only"
          name="Availability"
          onChange={() => setAvailability( 'wednesday' )}
          value="wednesday"
        />
      </Flex>
    </Fieldset>
  );
}

function RadioButtonExample() {
  const [artPreference, setArtPreference] = React.useState(undefined);

  return (
    <Fieldset legend="Which illustration is you favorite?">
      <Flex direction="column" gap={2}>
        <RadioButton
          checked={artPreference === 'coral'}
          id="coral"
          label="Coral"
          subtext="Botanical art in coral and green"
          image={<Box height={100} width={80}><Image alt="Botanical art in coral and green" src="https://i.ibb.co/7bQQYkX/stock2.jpg" fit="cover" naturalWidth={1} naturalHeight={1}/></Box>}

          name="Art Preference"
          onChange={() => setArtPreference( 'coral' )}
          value="coral"
        />
        <RadioButton
          checked={artPreference === 'blue'}
          id="blue"
          label="Blue"
          subtext="Typography and shoe in blue"
          image={<Box height={100} width={80}><Image alt="Typography and shoe in blue" src="https://i.ibb.co/jVR29XV/stock5.jpg" fit="cover" naturalWidth={1} naturalHeight={1}/></Box>}
          name="Art Preference"
          onChange={() => setArtPreference( 'blue' )}
          value="blue"
        />
        <RadioButton
          checked={artPreference === 'green'}
          id="green"
          label="Green"
          subtext="Abstract art in green"
          image={<Box height={100} width={80}><Image alt="Abstract art in green" src="https://i.ibb.co/FY2MKr5/stock6.jpg" fit="cover" naturalWidth={1} naturalHeight={1}/></Box>}
          name="Art Preference"
          onChange={() => setArtPreference( 'green' )}
          value="green"
        />
      </Flex>
    </Fieldset>
  );
}

function RadioButtonExample() {
  const ref = React.useRef();
  const [label, setLabel] = React.useState("24 px RadioButton");
  const [size, setSize] = React.useState('md');
  const [switched, setSwitched] = React.useState(false);

  React.useEffect(() => {
      setLabel(ref.current && ref.current.offsetHeight)
  }, [size]);

  return (
    <Flex gap={4}>
      <Label>
        <Flex gap={2}>
          <Switch
            onChange={() => {
              setSize(size === "sm" ? "md" : "sm")
              setSwitched(!switched)}
            }
            id="emailNotifications"
            switched={switched}
          />
          <Text>Toggle RadioButton to small size</Text>
        </Flex>
      </Label>
        <RadioButton
          id="sizing"
          checked={false}
          label={label + 'px RadioButton'}
          onChange={() => {} }
          value="value"
          ref={ref}
          size={size}
        />
    </Flex>
  );
}

function RadioButtonPopoverExample() {
  const [open, setOpen] = React.useState(false);
  const [option, setOption] = React.useState(false);
  const anchorCatRef = React.useRef();
  const anchorDogRef = React.useRef();

  return (
    <Fieldset legend="Tell us about yourself" legendDisplay="hidden">
      <Flex alignItems="start" direction="column" gap={4}>
        <Box display="inlineBlock" ref={anchorCatRef}>
          <RadioButton
            id="cat"
            checked={option === "cat"}
            label="I'm a cat person"
            onChange={() => {
              setOpen(true)
              setOption("cat")}
            }
            value="cat"
          />
        </Box>
        <Box display="inlineBlock" ref={anchorDogRef}>
          <RadioButton
            id="dog"
            checked={option === "dog"}
            label="I'm a dog person"
            onChange={() => {
              setOpen(true)
              setOption('dog')}
            }
            value="dog"
          />
        </Box>
      </Flex>
      {open &&
        <Layer>
          <Popover
            anchor={option === "cat" ? anchorCatRef.current  : anchorDogRef.current}
            color="red"
            idealDirection="right"
            onDismiss={() => setOpen(false)}
            positionRelativeToAnchor={false}
            shouldFocus={false}
            size="md"
          >
            <Link
              href={
                option === "cat"
                  ? "https://www.pinterest.com/search/pins/?q=cats"
                  : "https://www.pinterest.com/search/pins/?q=dogs"
              }
              target='blank'
            >
              <Box padding={3}>
                <Text
                  color="white"
                  weight="bold"
                >
                { option === "cat"
                    ? "Check cats on Pinterest!"
                    : "Check dogs on Pinterest!"
                }
                </Text>
              </Box>
            </Link>
          </Popover>
        </Layer>
      }
    </Fieldset>
  );
}