/* eslint-disable @next/next/no-img-element */
import Dashboard_Chart from '@/components/Chart/Dashboard_Chart';
import DashboardLayout from '@/components/Layouts/DashboardLayout';
import Link from 'next/link';
import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// import { faHeart } from '@fortawesome/free-regular-svg-icons';
import { Card, Col, ListGroup, Row, Form, Button } from 'react-bootstrap';
import Image from 'react-bootstrap/Image';
import Modal from 'react-bootstrap/Modal';
import Select from 'react-select';
import CloseButton from 'react-bootstrap/CloseButton';
import { useRouter } from 'next/router';

// import ToggleButton from 'react-bootstrap/ToggleButton';

const delivery = [
  {
    id: 0,
    title: 'Shipping Address',
    name: 'Johan Smith',
    contact: '+1 234 45678 90',
    Phone: 'Phone no.',
    address: '20 cooper square New York, NY 10003, USA',
    shipping: '20 cooper square New York, NY 10003, USA',
  },

  {
    id: 1,
    title: 'Billing Address',
    name: 'Johan Smith',
    contact: '+1 234 45678 90',
    Phone: 'Phone no.',
    address: '20 cooper square New York, NY 10003, USA',
    shipping: '20 cooper square New York, NY 10003, USA',
  },
];

export default function DeliveryAddress() {
  const router = useRouter();
  const [modalShowEditAddress, setModalEditAddress] = React.useState(false);
  const [modalShowAddAddress, setModalAddAddress] = React.useState(false);
  const [modalShowBillingAddress, setModalBillingAddress] = React.useState(false);
  const [modalShow2, setModalShow2] = React.useState(false);
  // const closeHeart = ()=>setModalShow(false)
  // const [modalShow2, setModalShow2] = React.useState(false);

  return (
    <DashboardLayout>
      <div className="delivery-page">
        <Row>
          <Col lg={6}>
            <div className="delivery-list">
              <h2 className="heading">Delivery Address</h2>
              <h6>We will deliver your order here</h6>
            </div>
          </Col>
          <Col lg={6}>
            <div className="ship-btn">
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => setModalAddAddress(true)}
              >
                <img src={'/images/basil_add-outline.svg'} alt="" />
                Add Address
              </button>
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => setModalBillingAddress(true)}
              >
                <img src={'/images/basil_add-outline.svg'} alt="" />
                Add Billing Address
              </button>
            </div>
          </Col>
        </Row>

        <Row className="">
          <div className="home-dashbaord">
            {delivery.map((data, index) => (
              <Col key={index} lg="6">
                <Card className="card-box-delivery mt-5">
                  <Card.Body>
                    <div className="deliver-ship">
                      <h4>{data.title}</h4>
                      <div className="recipte">
                        <h5>Name</h5>
                        <h5>{data.name}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Contact</h5>
                        <h5>{data.contact}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Phone no.</h5>
                        <h5>{data.Phone}</h5>
                      </div>

                      <div className="recipte">
                        <h5>Address</h5>
                        <span>{data.address}</span>
                      </div>

                      <div className="recipte">
                        <h5>Shipping Address</h5>
                        <span>{data.shipping}</span>
                      </div>

                      <div className="recipte">
                        <Link href="" onClick={() => setModalEditAddress(true)}>
                          <img src={'/images/Edit.svg'} alt="" />
                          Edit Address
                        </Link>
                        <Link href="" onClick={() => setModalShow2(true)}>
                          <img src={'/images/Delete.svg'} alt="" />
                          Delete Address
                        </Link>
                      </div>
                    </div>
                  </Card.Body>
                </Card>
              </Col>
            ))}
          </div>
          <button
            type="button"
            className="btn btn-primary confirm mt-4"
            onClick={() => router.push('/my-cart/cart-checkout')}
          >
            Confirm Address
          </button>
        </Row>
        <EditAddress show={modalShowEditAddress} onHide={() => setModalEditAddress(false)} />
        <AddAddress show={modalShowAddAddress} onHide={() => setModalAddAddress(false)} />

        <BillingAddress
          show={modalShowBillingAddress}
          onHide={() => setModalBillingAddress(false)}
        />

        <DeleteAddress show={modalShow2} onHide={() => setModalShow2(false)} />
      </div>
    </DashboardLayout>
  );
}

const options_1 = [
  { value: 'Turkey', label: 'Turkey' },
  { value: 'srilanka', label: 'srilanka' },
];

const customStyles = {
  control: (provided: any) => ({
    ...provided,
    borderRadius: '14px',
    background: '#FFF',
    padding: '8px 16px 10px 16px',
    border: '1px solid #1C1C1C',
    boxShadow: '6px 8px 24px 0px rgba(115, 115, 115, 0.16)',
    // fontSize: "16px", // Adjust the font size as needed
    '@media (max-width: 768px)': {
      width: '100%',
      marginLeft: '0',
      fontSize: '14px', // Adjust the font size for smaller screens
    },
  }),

  indicatorSeparator: () => ({ display: 'none' }),
};

// Edit Address
function EditAddress(props: any) {
  const [selectedOption_1, setSelectedOption_1] = useState<any>(null);
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="xl"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-5 mt-4">Edit Address</h4>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Name</label>
                <input type="text" className="form-control" placeholder="Enter your name" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Contact </label>
                <input type="text" className="form-control" placeholder="Enter your contact No" />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Billing Address </label>
                <input type="text" className="form-control" placeholder="Enter Shipping Address" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">City, State </label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter your city and state name"
                />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Country</label>
                <Select
                  placeholder="Choose your country"
                  defaultValue={selectedOption_1}
                  onChange={setSelectedOption_1}
                  options={options_1}
                  styles={customStyles}
                />
              </div>
            </div>
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Phone </label>
                <input type="text" className="form-control" placeholder="Enter your Phone No" />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Zip Code </label>
                <input type="text" className="form-control" placeholder="Enter your zip code" />
              </div>
            </div>
            <div className="form-group"></div>
          </div>

          <button
            type="button"
            className=" w-50 btn btn-primary mt-4 "
            onClick={() => router.reload()}
          >
            Add
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}

// Add Address

function AddAddress(props: any) {
  const [selectedOption_1, setSelectedOption_1] = useState<any>(null);
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="xl"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-5 mt-4">Add Address</h4>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Name</label>
                <input type="text" className="form-control" placeholder="Enter your name" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Contact </label>
                <input type="text" className="form-control" placeholder="Enter your contact No" />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Billing Address </label>
                <input type="text" className="form-control" placeholder="Enter Shipping Address" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">City, State </label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter your city and state name"
                />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Country</label>
                <Select
                  placeholder="Choose your country"
                  defaultValue={selectedOption_1}
                  onChange={setSelectedOption_1}
                  options={options_1}
                  styles={customStyles}
                />
              </div>
            </div>
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Phone </label>
                <input type="text" className="form-control" placeholder="Enter your Phone No" />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Zip Code </label>
                <input type="text" className="form-control" placeholder="Enter your zip code" />
              </div>
            </div>
            <div className="form-group"></div>
          </div>

          <button
            type="button"
            className=" w-50 btn btn-primary mt-4 "
            onClick={() => router.reload()}
          >
            Add
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}

// Biling Address

function BillingAddress(props: any) {
  const [selectedOption_1, setSelectedOption_1] = useState<any>(null);
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="xl"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-5 mt-4">Add Billing Address</h4>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Name</label>
                <input type="text" className="form-control" placeholder="Enter your name" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Contact </label>
                <input type="text" className="form-control" placeholder="Enter your contact No" />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Billing Address </label>
                <input type="text" className="form-control" placeholder="Enter Shipping Address" />
              </div>
            </div>

            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">City, State </label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Enter your city and state name"
                />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Country</label>
                <Select
                  placeholder="Choose your country"
                  defaultValue={selectedOption_1}
                  onChange={setSelectedOption_1}
                  options={options_1}
                  styles={customStyles}
                />
              </div>
            </div>
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Phone </label>
                <input type="text" className="form-control" placeholder="Enter your Phone No" />
              </div>
            </div>
          </div>

          <div className="end-form">
            <div className="form-group">
              <div className="icon-field">
                <label htmlFor="">Zip Code </label>
                <input type="text" className="form-control" placeholder="Enter your zip code" />
              </div>
            </div>
            <div className="form-group"></div>
          </div>

          <button
            type="button"
            className=" w-50 btn btn-primary mt-4 "
            onClick={() => router.reload()}
          >
            Add
          </button>
        </div>
      </Modal.Body>
    </Modal>
  );
}

// Delete Address Modal

function DeleteAddress(props: any) {
  const [chat, setChat] = useState(true);
  const router = useRouter();
  return (
    <Modal
      {...props}
      size="md"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      className="affilaite-modal"
    >
      <Modal.Header closeButton></Modal.Header>

      <Modal.Body>
        <div className="report">
          <h4 className="text-center mb-5 mt-4">Are you sure you want to delete Address?</h4>
          <div className="blocked-btn ">
            <button
              type="button"
              className="w-100 btn btn-primary no-user"
              onClick={() => router.push('/login')}
            >
              No
            </button>
            <button
              type="button"
              className="w-100 btn btn-primary unblock-user"
              onClick={() => router.reload()}
            >
              Delete
            </button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}