'use client'

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
import Form from 'react-bootstrap/Form';

import type { ModalProps } from 'react-bootstrap/Modal';

function MyVerticallyCenteredModal(props: ModalProps) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="user-modal"
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Add Shipping Address
        </Modal.Title>
      </Modal.Header>
      <Modal.Body className="m-5">
        <Form>
          <Form.Group className="mb-3">
            <Form.Label>Full Name <span className="text-danger">*</span></Form.Label>
            <Form.Control placeholder="Enter Full Name" />
          </Form.Group>
          <Form.Group className="mb-3">
            <Form.Label>Phone Number <span className="text-danger">*</span></Form.Label>
            <Form.Control placeholder="Enter Mobile No." />
          </Form.Group>
          <Form.Group  className="mb-3">
            <Form.Label>Select Delivery Area <span className="text-danger">*</span></Form.Label>
            <Form.Select defaultValue="Choose...">
              <option>Barishal</option>
              <option>Chattogram</option>
              <option>Dhaka</option>
              <option>Khulna</option>
              <option>Mymenshing</option>
              <option>Rajshahi</option>
              <option>Rangpur</option>
              <option>Khulna</option>
            </Form.Select>
          </Form.Group>
          <Form.Group  className="mb-3">
            <Form.Label>Address <span className="text-danger">*</span></Form.Label>
            <Form.Control type="text" placeholder="Type House, Flat No, Road" />
          </Form.Group>
          <Form.Group  className="mb-3">
            <Form.Label>Address Type <span className="text-danger">*</span></Form.Label>
            <Form.Select defaultValue="Choose...">
              <option>Home</option>
              <option>Office</option>
              <option>Hometown</option>
            </Form.Select>
          </Form.Group>
          <Form.Group className="mb-3">
            <Form.Check type="checkbox" label="Make default address" />
          </Form.Group>
          <Button variant="outline-success" type="submit" >
            Save
          </Button>
        </Form>
      </Modal.Body>
    </Modal>
  );
}

const UserAddressForm = () => {
  const [modalShow, setModalShow] = useState(false);
  return (
    <div>
      <Button variant="outline-success" onClick={() => setModalShow(true)}>
        Add New Address
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </div>
  )
}

export default UserAddressForm