import React, { Component } from 'react';
import {
  Nav,
  Navbar,
  Form,
  Container,
  FormControl,
  Button,
  Dropdown,
  DropdownButton,
  Modal,
} from 'react-bootstrap';
import '../style/header.css';

import Logo from '../pic/Icon.png';
import Search from '../pic/search.png';

class Header extends Component {
  state = {
    signIn: false,
    signUp: false,
  };

  showSignIn = () => {
    this.setState({ signIn: true });
  };

  closeSignIn = () => {
    this.setState({ signIn: false });
  };

  showSignUp = () => {
    this.setState({ signUp: true });
  };

  closeSignUp = () => {
    this.setState({ signUp: true });
  };
  render() {
    return (
      <Container fluid>
        <Navbar className='justify-content-between' fixed='top'>
          <Navbar.Brand>
            <img src={Logo} alt=''></img>
          </Navbar.Brand>

          <Form inline>
            <FormControl type='text' placeholder='Tangerang Selatan' />
            <div className='home-search-line' />
            <Button variant='outline-success'>Search</Button>
          </Form>
          <Nav>
            <Button variant='white' onClick={this.showSignIn} size='lg'>
              Sign In
            </Button>
            <Button variant='dark' onClick={this.showSignUp} size='lg'>
              Sign Up
            </Button>
          </Nav>
        </Navbar>

        <Modal
          show={this.signUp}
          onHide={this.closeSignUp}
          size='lg'
          aria-labelledby='contained-modal-title-vcenter'
          centered
        >
          <Modal.Header closeButton></Modal.Header>
          <Modal.Body>
            <Form>
              <h1 style={{ textAlign: 'center' }}>SIGN UP</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.props.showSignUp}
                >
                  SIGN IN
                </Button>
              </div>
            </Form>
          </Modal.Body>
        </Modal>

        <Modal
          size='lg'
          aria-labelledby='contained-modal-title-vcenter'
          centered
          show={this.signIn}
          onHide={this.closeSignIn}
        >
          <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.closeSignIn}
                >
                  SIGN IN
                </Button>
              </div>
            </Form>
          </Modal.Body>
        </Modal>
      </Container>
    );
  }
}

export default Header;