import { 
  TitleBar, 
  PushButton, 
  TextField, 
  Toolbar, 
  Box, 
  SegmentedControl,
  IndeterminateCircularProgressIndicator,
  Form,
  Label
} from 'react-desktop';

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = { selectedTab: 'login' };
  }

  render() {
    return (
      <div>
        <TitleBar title="Page" controls={true}/>

        <TitleBar title="TitleBar with Toolbar" controls={true}>
          <Toolbar/>
        </TitleBar>

        <Box>
          <SegmentedControl>
            <SegmentedControl.Item 
              title="Login"
              selected={this.state.selectedTab === 'login'}
              onPress={() => { this.setState({ selectedTab: 'login' }) } }
            >
              <Form>
                <Form.Row>
                  <Label>Username</Label>
                  <TextField defaultValue="" placeholder="Username"/>
                </Form.Row>
              </Form>

              <PushButton>Cancel</PushButton>
              <PushButton color="blue">Submit</PushButton>

              <IndeterminateCircularProgressIndicator visible={true}/>

            </SegmentedControl.Item>
          </SegmentedControl>
        </Box>
      </div>
    );
  }
}