Form

const relationshipStatusOptions = [
  {
    label: "Single",
    value: "single",
  },
  {
    label: "Married",
    value: "married",
  },
  {
    label: "Other",
    value: "other",
  },
]
const movieOptions = [
  {
    data: {
      name: "Parasite",
      description:
        "Greed and class discrimination threaten the newly formed symbiotic relationship between the wealthy Park family and the destitute Kim clan.",
      imageSrc:
        "https://m.media-amazon.com/images/M/MV5BYWZjMjk3ZTItODQ2ZC00NTY5LWE0ZDYtZTI3MjcwN2Q5NTVkXkEyXkFqcGdeQXVyODk4OTc3MTY@._V1_UY209_CR0,0,140,209_AL_.jpg",
    },
    value: "parasite",
  },
  {
    data: {
      name: "1917",
      description:
        "April 6th, 1917. As a regiment assembles to wage war deep in enemy territory, two soldiers are assigned to race against time and deliver a message that will stop 1,600 men from walking straight into a deadly trap.",
      imageSrc:
        "https://m.media-amazon.com/images/M/MV5BOTdmNTFjNDEtNzg0My00ZjkxLTg1ZDAtZTdkMDc2ZmFiNWQ1XkEyXkFqcGdeQXVyNTAzNzgwNTg@._V1_UX140_CR0,0,140,209_AL_.jpg",
    },
    value: "1917",
  },
  {
    data: {
      name: "The Irishman",
      description:
        "An aging hitman recalls his time with the mob and the intersecting events with his friend, Jimmy Hoffa, through the 1950-70s.",
      imageSrc:
        "https://m.media-amazon.com/images/M/MV5BMGUyM2ZiZmUtMWY0OC00NTQ4LThkOGUtNjY2NjkzMDJiMWMwXkEyXkFqcGdeQXVyMzY0MTE3NzU@._V1_UY209_CR1,0,140,209_AL_.jpg",
    },
    value: "the-irishman",
  },
  {
    data: {
      name: "Chernobyl",
      description:
        "In April 1986, an explosion at the Chernobyl nuclear power plant in the Union of Soviet Socialist Republics becomes one of the world's worst man-made catastrophes.",
      imageSrc:
        "https://m.media-amazon.com/images/M/MV5BZGQ2YmMxZmEtYjI5OS00NzlkLTlkNTEtYWMyMzkyMzc2MDU5XkEyXkFqcGdeQXVyMzQ2MDI5NjU@._V1_UX140_CR0,0,140,209_AL_.jpg",
    },
    value: "chernobyl",
  },
]
const fruitOptions = [
  {
    key: "apple",
    label: "Apple",
  },
  {
    key: "banana",
    label: "Banana",
  },
  {
    key: "lemon",
    label: "Lemon",
  },
]
const hungryOptions = [
  {
    label: "Yes",
    value: "yes",
  },
  {
    label: "No",
    value: "no",
  },
  {
    label: "Maybe",
    value: "maybe",
  },
]

function MoviePlaceholder() {
  return <Text>Please select a movie</Text>
}

function movieOptionToString({ data }) {
  return data.name
}

function MovieOption({ data }) {
  const { name, description, imageSrc } = data

  return (
    <Grid cols="80px 1fr" colsGap="4">
      <Grid.Item colSpan="0" rowSpan="0-1">
        <Flex>
          <img src={imageSrc} alt={name} width="100%" />
        </Flex>
      </Grid.Item>
      <Grid.Item colSpan="1" rowSpan="0">
        <Text>
          <strong>{name}</strong>
        </Text>
      </Grid.Item>
      <Grid.Item colSpan="1" rowSpan="1">
        <Text textStyle="body2" color="grey.t75">
          {description}
        </Text>
      </Grid.Item>
    </Grid>
  )
}

const initialValues = {
  name: "",
  relationshipStatus: "",
  favouriteMovie: "",
  fruits: {
    apple: false,
    banana: false,
    lemon: false,
  },
  likeIceCream: false,
  hungry: "",
  salary: {
    amount: "",
    frequency: "",
  },
  birthDate: {
    day: "",
    month: "",
    year: "",
  },
  age: {
    years: "",
    months: "",
  },
  aboutYourself: "",
  iceCreamType: false,
  iceCream: {
    type: "",
    size: "",
  },
}

function App() {
  const onSubmit = ({ errors, values }) => {
    if (Object.keys(errors).length > 0) {
      console.log(
        "Errors:",
        JSON.stringify(errors, null, 2)
      )
    } else {
      console.log(
        "Submitting:",
        JSON.stringify(values, null, 2)
      )
    }
  }

  return (
    <Container padding="8">
      <Form
        initialValues={initialValues}
        onSubmit={onSubmit}
      >
        {(formData) => (
          <Stack gap="8">
            <Text as="h2" textStyle="heading4">
              About you
            </Text>
            <Input name="name" label="Name" />
            <Select
              name="relationshipStatus"
              label="Relationship status"
              options={relationshipStatusOptions}
            />
            <Dropdown
              name="favouriteMovie"
              label="Favourite movie"
              placeholderComponent={MoviePlaceholder}
              options={movieOptions}
              optionToString={movieOptionToString}
              optionComponent={MovieOption}
            />
            <CheckboxGroup
              name="fruits"
              label="Which fruits do you like?"
              options={fruitOptions}
            />
            <Checkbox
              label="Do you like ice cream?"
              hideLabel
              name="likeIceCream"
              helpText="You MUST like it!"
            >
              I like ice cream
            </Checkbox>
            <RadioGroup
              name="hungry"
              label="Are you hungry?"
              options={hungryOptions}
            />
            <Frequency
              name="salary"
              label="Salary (before tax)"
              amountPrefix="$"
            />
            <DatePicker
              name="birthDate"
              label="Birth date"
            />
            <TimeSpan name="age" label="Age" />
            <Textarea
              name="aboutYourself"
              label="Tell us about yourself"
              height="100"
            />
            <Checkbox
              label="Do you want to tell me your favourite ice cream?"
              hideLabel
              name="iceCreamType"
              optional
            >
              I want to tell you my favourite ice cream
            </Checkbox>
            {formData.state.values.iceCreamType && (
              <Input
                name="iceCream.type"
                label="Ice Cream"
              />
            )}
            <Input
              name="iceCream.size"
              label="Ice Cream Size"
            />
            <Button type="submit">Submit</Button>
          </Stack>
        )}
      </Form>
    </Container>
  )
}

render(<App />)