SelectableCard

import React from 'react'

import { Formik } from 'formik'
import * as Yup from 'yup'

import { Actions, Grid, Tag } from '@gusto/workbench'
import {
  Form,
  SelectableCard,
  SelectableCardGroup,
  SubmitButton,
} from '@gusto/workbench-formik'
import { Chart, DollarBill, PlusShield } from '@gusto/workbench-illos'

export const MultiSelectGroup = () => {
  return (
    <Formik
      initialValues={{
        connectApps: [],
      }}
      validationSchema={Yup.object().shape({
        connectApps: Yup.array().min(1, 'At least one add-on is required'),
      })}
      onSubmit={values => alert(JSON.stringify(values))}
    >
      <Form>
        <SelectableCardGroup
          name="connectApps"
          legend="Connect apps you love to Gusto"
        >
          <Grid
            rowGap={6}
            columnGap={4}
            maxWidth={660}
            maxWidthMd="100%"
            templateColumnsMd="repeat(3, 1fr)"
            marginBlockEnd={3}
          >
            {/* 👇 Remember to add a `value` for Formik to distinguish each input in group */}
            <SelectableCard
              type="checkbox"
              value="wuckertLLC"
              illustration={<DollarBill />}
              title="Wuckert, LLC"
              body={
                <div>
                  Wuckert, LLC provides a top of the line payroll platform
                  combining all the best features.
                </div>
              }
            />
            {/* 👇 Remember to add a `value` for Formik to distinguish each input in group */}
            <SelectableCard
              type="checkbox"
              value="pfannerstillGroup"
              illustration={<PlusShield />}
              title="Pfannerstill Group, Inc."
              body={
                <div>
                  Pfannerstill Group, Inc. offers a wide range of benefits
                  including 401(k), HSA, and college savings.
                </div>
              }
              tags={
                <Tag variant="filled" severity="success">
                  New
                </Tag>
              }
            />
            {/* 👇 Remember to add a `value` for Formik to distinguish each input in group */}
            <SelectableCard
              type="checkbox"
              value="prioritySupport"
              illustration={<Chart />}
              title="Oberbrunner Accountants, Inc."
              body={
                <div>
                  Oberbrunner Accountants, Inc. has integrations for all your
                  reporting needs. Let Oberbrunner do the accounting for you and
                  spend more time on your business.
                </div>
              }
            />
          </Grid>
        </SelectableCardGroup>
        <Actions justifyContent="center">
          <SubmitButton>Submit</SubmitButton>
        </Actions>
      </Form>
    </Formik>
  )
}