import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Text, UserPicker, Inline,DatePicker, Box, Label, Select, xcss} from '@forge/react';
import { invoke } from '@forge/bridge';


const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    invoke('getText', { example: 'my-invoke-variable' }).then(setData);
  }, []);

  return (
    <>
      <Text>Hello world!</Text>
      <Text>{data ? data : 'Loading...'}</Text>
      <Inline space={'space.200'}>
      <Box xcss={xcss({ width: '140px' })}>
      <Label>Start Date</Label>
      <DatePicker
            placeholder={'1977-04-30'}
            weekStartDay={1}
            
          />
        </Box>
  <Box xcss={xcss({ width: '140px' })}>
    <Label>End Date</Label>
    <DatePicker
      placeholder={'2045-04-30'}
      weekStartDay={1}
    />
  </Box>
  <Box xcss={xcss({ width: '200px' })}>
    <UserPicker label={'Reporter'} name={'user'} />
  </Box>
  <Box xcss={xcss({ width: '170px' })}>
    <Label>Statuses</Label>
    <Select options={["one","two"]} isMulti />
  </Box>

</Inline>

    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);