import { Textarea } from '@/components';
import BookingInnerCard from '@/components/Cards/BookingInnerCard';
import CustomModal from '@/components/CustomModal';
import Button from '@/components/ui/Button';
import ButtonGroup from '@/components/ui/ButtonGroup';
import FileUploader from '@/components/ui/FileUploader';
import PageHeader from '@/components/ui/PageHeader';
import Head from 'next/head';
import { useState } from 'react';
import { Col, Form, Row } from 'react-bootstrap';

const Pending = () => {
  const [submitProof, setSubmitProof] = useState<boolean>(false);
  const [deliverSuccess, setDeliverySuccess] = useState<boolean>(false);

  const [reasonForAcceptance, setReasonForAcceptance] =
    useState<boolean>(false);

  const [reasonForRejection, setReasonForRejection] = useState<boolean>(false);

  const handleOpenDeliverySuccessModal = () => {
    setSubmitProof(false);
    setDeliverySuccess(true);
  };

  return (
    <>
      <Head>
        <title>Carrier Request | Deliver X</title>
      </Head>
      <>
        <div className="d-flex justify-content-between align-items-center">
          <PageHeader title="Requests" isShowBackButton />
        </div>

        <Row>
          <Col sm={8}>
            <div className="d-flex mt-3 gap-3 align-items-center flex-wrap">
              <BookingInnerCard
                title="Pickup Address"
                subTitle="California Academy of Sciences"
                image={<img src="/images/icons/map-with-marker.png" alt="" />}
              />
              <BookingInnerCard
                title="Destination"
                subTitle="California Academy of Sciences"
                image={<img src="/images/icons/map-with-marker.png" alt="" />}
              />
              <BookingInnerCard
                title="12-02-2024"
                subTitle="11 am - 12 am"
                image={<img src="/images/icons/calendar.png" alt="" />}
              />

              <BookingInnerCard
                title="Price"
                subTitle="$28 +$0.95 per labor min"
                isSwapColumn
                image={<img src="/images/icons/price.png" alt="" />}
              />

              <BookingInnerCard
                title="Van"
                subTitle="Delivery Type"
                isSwapColumn
                image={<img src="/images/icons/delivery.png" alt="" />}
              />

              <BookingInnerCard
                title="John Marshall"
                subTitle="User"
                isSwapColumn
                image={<img src="/images/users/booking-user-1.png" alt="" />}
              />
            </div>
          </Col>
        </Row>

        <div className="d-flex justify-content-center align-items-center my-3">
          <ButtonGroup className="">
            <Button
              onClick={() => setReasonForAcceptance(true)}
              className="btn btn-feature UrbanistRegular"
              size="lg"
            >
              Start
            </Button>
            <Button
              onClick={() => setReasonForRejection(true)}
              className="btn btn-outline-dark rounded-pill UrbanistRegular"
              size="lg"
            >
              Cancel
            </Button>
          </ButtonGroup>
        </div>

        <img src="/images/map-image.png" className="" width={'100%'} alt="" />
      </>

      <CustomModal
        isCloseBtn
        show={submitProof}
        handleClose={() => setSubmitProof(false)}
        className=""
      >
        <div className="px-3 ">
          <h2 className="mb-0 text-center modal-title fw-bolder">
            Submit Delivery Proof
          </h2>

          <FileUploader />

          <div className="text-center">
            <Button
              onClick={handleOpenDeliverySuccessModal}
              className="btn btn-feature mt-3 "
              size="md"
            >
              Submit
            </Button>
          </div>
        </div>

        {/* <div className="d-flex justify-content-center mt-4 gap-3 align-items-center">
            <button className="btn rounded-pill px-6 py-2 btn-outline-dark">
              No
            </button>
            <button
              onClick={() => setSubmitProof(false)}
              className="btn btn-feature px-6 py-2"
            >
              Yes
            </button>
          </div> */}
      </CustomModal>

      <CustomModal
        show={deliverSuccess}
        handleClose={() => setDeliverySuccess(false)}
      >
        <div className="px-sm-3 px-1">
          <h2 className="modal-title text-center fw-bolder">
            Congratulations Delivery has been completed successfully
          </h2>
          <div className="text-center">
            <Button
              className="btn btn-feature mt-3 "
              onClick={() => setDeliverySuccess(false)}
              size="lg"
            >
              Okay
            </Button>
          </div>
        </div>
      </CustomModal>

      <CustomModal
        isCloseBtn
        show={reasonForAcceptance}
        className=""
        handleClose={() => setReasonForAcceptance(false)}
      >
        <div className="d-flex p-4 flex-column justify-content-center align-items-center">
          <h3 className=" modal-title position-absolute   fw-bolder">
            Reason For Acceptance
          </h3>

          <Form.Group controlId="formEmail" className="mt-4 w-100">
            <Form.Label className="">Reason</Form.Label>
            <Textarea placeholder="Write a reason for Acceptance" />
          </Form.Group>

          <Button className="btn btn-feature mt-3" size="md">
            Submit
          </Button>
        </div>
      </CustomModal>

      <CustomModal
        isCloseBtn
        show={reasonForRejection}
        className=""
        handleClose={() => setReasonForRejection(false)}
      >
        <div className="d-flex p-4 flex-column justify-content-center align-items-center">
          <h3 className=" modal-title position-absolute   fw-bolder">
            Reason For Rejection
          </h3>

          <Form.Group controlId="formEmail" className="mt-4 w-100">
            <Form.Label className="">Reason</Form.Label>
            <Textarea placeholder="Write a Reason for cancellation" />
          </Form.Group>

          <Button className="btn btn-feature mt-3" size="md">
            Submit
          </Button>
        </div>
      </CustomModal>
    </>
  );
};

export default Pending;
