// @flow
import * as React from 'react';
import {styled, useStyletron} from '../../styles';
import {
  Box,
  Button,
  Checkbox,
  ParagraphXSmall,
  StateCard,
  Link,
} from '../../components';
import {useTranslations} from 'fusion-plugin-i18n-react';
import {StoreContext} from '../../store'
const DashboardCmp = styled('div', () => {
  return {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: '100vh',
  };
});
export const DashboardContent = () => {
  const translate = useTranslations();
  const [, $theme] = useStyletron();
  const [checked, setChecked] = React.useState(false);
  const {state, dispatch} = React.useContext(StoreContext)
  const handlePurchase = () => {
    console.log('Handle Tenant creation & plan purchase')
    console.log(state) // this is comming from the StoreContextProvider (includes tenant, plan & rest form info)
  }
  return (
    <DashboardCmp>
      <StateCard title="Dimension four starter" subtitle="Billed now: $300">
        <Box>
          <br />
          <ParagraphXSmall>
            You’ll be charged $300 yearly until you{' '}
            <Link style={{color: $theme.colors.primary400}} to="/legal">
              cancel
            </Link>{' '}
            your plan. Charges{' '}
            <Link style={{color: $theme.colors.primary400}} to="/legal">
              won’t be refunded
            </Link>{' '}
            when you cancel,{' '}
            <Link style={{color: $theme.colors.primary400}} to="/legal">
              unless it’s leagally required
            </Link>
            . Your payment data is encrypted and secure. All amounts shown are
            in USD.
          </ParagraphXSmall>
          <br />
          <Checkbox
            checked={checked}
            onChange={e => setChecked(e.target.checked)}
          >
            I agree to{' '}
            <Link
              style={{color: $theme.colors.primary400}}
              to="/terms-and-cond"
            >
              Dimension Four terms
            </Link>{' '}
            and the <b>Automatic Renewal Terms</b> above
          </Checkbox>
          <br />
          <Box>
            <Button fill type="submit" onClick = {handlePurchase}>
              {translate('Button.PurchaseNow').toUpperCase()}
            </Button>
          </Box>
        </Box>
      </StateCard>
    </DashboardCmp>
  );
};