import React, { Component } from 'react';
import {
  Container,
  Row,
  FormControl,
  Col,
  Form,
  Button,
  Jumbotron,
  DropdownButton,
  Dropdown,
  Modal,
} from 'react-bootstrap';
import logo from '../pic/Icon.png';

export default class Header extends Component {
  state = {
    modalup: false,
    modalin: false,
  };
  signupClose = () => {
    this.setState({ modalup: false });
  };
  signupOpen = () => {
    this.setState({ modalup: true });
  };
  singinClose = () => {
    this.setState({ modalin: false });
  };
  singinOpen = () => {
    this.setState({ modalin: true });
  };
  render() {
    return (
      <div>
        <div>
          <Jumbotron>
            <Container>
              <Row>
                <Col>
                  ````
                  <span>
                    <img src={logo} alt='logo' />
                  </span>
                </Col>
                <Col>
                  <Form inline className='search'>
                    <FormControl
                      type='text'
                      placeholder='Tangerang Selatan'
                      className='mr-sm-2'
                    />
                    <Button variant='outline-success'>Search</Button>
                  </Form>
                </Col>
                <Col>
                  <div className='sign'>
                    <Button
                      onClick={this.signinOpen}
                      variant='light'
                      style={{ marginRight: '20px' }}
                    >
                      Sign In
                    </Button>
                    <Singin
                      visible={this.state.modalin}
                      onClose={this.singinClose}
                    />

                    <Button onClick={this.signupOpen} variant='dark'>
                      Sign Up
                    </Button>
                    <Singup
                      visible={this.state.modalup}
                      onClose={this.signupClose}
                    />
                  </div>
                </Col>
              </Row>
            </Container>
          </Jumbotron>
        </div>
      </div>
    );
  }
}

class Singup extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Modal
          show={this.props.visible}
          onHide={this.props.onClose}
          size='lg'
          aria-labelledby='contained-modal-title-vcenter'
          centered
        >
          <Modal.Header closeButton></Modal.Header>
          <Modal.Body>
            <Form>
              <h1 style={{ textAlign: 'center' }}>SIGN IN</h1>
              <Form.Group controlId='formBasicName'>
                <Form.Label>Fullname</Form.Label>
                <Form.Control type='email' placeholder='Enter Fullname' />
              </Form.Group>
              <Form.Group controlId='formBasicUname'>
                <Form.Label>Username</Form.Label>
                <Form.Control type='text' placeholder='Enter Username' />
              </Form.Group>
              <Form.Group controlId='formBasicEmail'>
                <Form.Label>Email</Form.Label>
                <Form.Control type='email' placeholder='Enter Email' />
              </Form.Group>
              <Form.Group controlId='formBasicPassword'>
                <Form.Label>Password</Form.Label>
                <Form.Control type='password' placeholder='Enter Password' />
              </Form.Group>
              <Form.Group>
                <Form.Label>List as</Form.Label>
                <DropdownButton
                  id='dropdown-basic-button'
                  title='Select your status'
                >
                  <Dropdown.Item href='#/action-1'>User</Dropdown.Item>
                  <Dropdown.Item href='#/action-2'>Owner</Dropdown.Item>
                </DropdownButton>
              </Form.Group>{' '}
              <Form.Group>
                <Form.Label>Gender</Form.Label>
                <DropdownButton
                  id='dropdown-basic-button'
                  title='Select your gender'
                >
                  <Dropdown.Item href='#/action-1'>Male</Dropdown.Item>
                  <Dropdown.Item href='#/action-2'>Female</Dropdown.Item>
                </DropdownButton>
              </Form.Group>
              <Form.Group controlId='exampleForm.ControlTextarea1'>
                <Form.Label>Address</Form.Label>
                <Form.Control as='textarea' rows='3' />
              </Form.Group>
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button
                  variant='primary'
                  style={{ display: 'flex', justifyContent: 'center' }}
                  onClick={this.handleCloseModal}
                >
                  SIGN IN
                </Button>
              </div>
            </Form>
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}

class Singin extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Modal
          size='lg'
          aria-labelledby='contained-modal-title-vcenter'
          centered
          show={this.props.visible}
          onHide={this.props.onClose}
        >
          <Modal.Header closeButton></Modal.Header>
          <Modal.Body>
            <Form>
              <h1 style={{ textAlign: 'center' }}>SIGN IN</h1>
              <Form.Group controlId='formBasicEmail'>
                <Form.Label>Email address</Form.Label>
                <Form.Control type='email' placeholder='Enter email' />
              </Form.Group>

              <Form.Group controlId='formBasicPassword'>
                <Form.Label>Password</Form.Label>
                <Form.Control type='password' placeholder='Password' />
              </Form.Group>
              <Form.Group controlId='formBasicCheckbox'>
                <Form.Text className='text-muted'>
                  Dont have an account? Click Here
                </Form.Text>
              </Form.Group>
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <Button
                  variant='primary'
                  style={{ display: 'flex', justifyContent: 'center' }}
                  onClick={this.handleCloseModal}
                >
                  SIGN IN
                </Button>
              </div>
            </Form>
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}