import React, { useState, MouseEvent } from 'react';
import Dropdown from 'react-bootstrap/Dropdown';
import { Container, Row, Col } from 'react-bootstrap';
import { getMondayDates } from 'mocks/getMondayDates';

const CreateTimesheet = () => {
  const [mondays, setMondays] = useState(getMondayDates());
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [value, setValue] = useState('Select start date');

  const toggle = () => {
    setDropdownOpen(!dropdownOpen);
  };
  const select = (key: string) => {
    // event.preventDefault();
    setDropdownOpen(!dropdownOpen);
    console.log(key);
    console.log('dddd');
    // setValue(event.target);
  };

  return (
    <Container fluid>
      <Row className="justify-content-center">
        <Col md={8} lg={4}>
          <h3>Create new timesheet</h3>
        </Col>
      </Row>
      <Row className="justify-content-center">
        <Col md={8} lg={4}>
          <Dropdown onSelect={() => select}>
            <Dropdown.Toggle variant="primary" id="dropdown-basic">
              {value}
            </Dropdown.Toggle>
            <Dropdown.Menu>
              {mondays.map((option, index) => {
                return <Dropdown.Item key={index}>{option}</Dropdown.Item>;
              })}
            </Dropdown.Menu>
          </Dropdown>
        </Col>
      </Row>
    </Container>
  );
};
export default CreateTimesheet;