/* eslint-disable @next/next/no-img-element */
import PreLoginLayout from '@/components/Layouts/PreLoginLayout';
import style from '@/styles/modules/prelogin/prelogin-layout.module.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import DashboardLayout from '@/components/Layouts/DashboardLayout';
// import { faShieldAlt, faSpotify, faInstagram} from '@fortawesome/free-brands-svg-icons';
import { faUser, faPhone, faCloudArrowUp, faShieldAlt } from '@fortawesome/free-solid-svg-icons';
import DatePicker from 'react-date-picker';
import { useState } from 'react';
import Select from 'react-select';
import Link from 'next/link';
import Modal from 'react-bootstrap/Modal';
import ProfilePictureUpload from '@/components/Form/ProfilePictureUpload';
import { Col, Row, Button } from 'react-bootstrap';
import { useRouter } from 'next/router';
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];

const options_profile = [
  { value: 'Gamer', label: 'Gamer' },
  { value: 'Dancer', label: 'Dancer' },
  { value: 'Singer', label: 'Singer' },
];

const customStyles = {
  control: (provided: any) => ({
    ...provided,
    borderRadius: '16px',
    background: '#FFF',
    padding: '10px 0',
    border: 'none',
    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' }),
};

export default function EditProfile() {
  const [value, onChange] = useState<Value>(new Date());
  const [selectedOptions_profile, setSelectedOptions_profile] = useState<any>(null);
  const [modalShowVerifiedProfile, setModalVerifiedProfile] = useState<any>(false);
  const router = useRouter();
  return (
    <>
      <DashboardLayout>
        <div className="edit-profile">
          <Row>
            <Col lg="10">
              <h1 className={style.form_title}>Edit Profile</h1>
              <Row>
                {/* PROFILE  */}
                {/* TODO- Work on onChange event */}
                {/* <ProfilePictureUpload
                  id="upAvatar"
                  name="upAvatar"
                  label=""
                  onChange={'onChange'}
                /> */}
                <Col lg="6">
                  <form className="prelogin form-wrapper">
                    {/* NAME */}
                    <Row>
                      <Col lg="12">
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Name</label>
                            <input type="text" className="form-control" placeholder="James David" />
                            <i className="icon icon-map"></i>
                          </div>
                        </div>
                      </Col>
                    </Row>

                    <Row>
                      <Col lg="12">
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Age</label>
                            <input type="text" className="form-control" placeholder="Age" />
                            <i className="icon icon-map-pin"></i>
                          </div>
                        </div>
                      </Col>
                    </Row>

                    <Row>
                      <Col lg="12">
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Phone Number</label>
                            <input
                              type="number"
                              className="form-control"
                              placeholder="1234123 123123"
                            />
                          </div>
                        </div>
                      </Col>
                    </Row>

                    <Row>
                      <Col lg="12">
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Location</label>
                            <input
                              type="number"
                              className="form-control"
                              placeholder="London, UK"
                            />
                          </div>
                        </div>
                      </Col>
                    </Row>
                    {/* SUBMIT */}
                  </form>
                </Col>

                <Col lg="6">
                  <form className="prelogin form-wrapper">
                    {/* PROFILE  */}
                    {/* NAME */}

                    <Row>
                      <Col lg="12">
                        <div className="form-group">
                          <div className="icon-field">
                            <label htmlFor="">Interest</label>
                            <Select
                              placeholder="Interest"
                              defaultValue={selectedOptions_profile}
                              onChange={setSelectedOptions_profile}
                              isMulti
                              options={options_profile}
                              styles={customStyles}
                            />
                          </div>
                        </div>
                      </Col>
                    </Row>
                    {/* SUBMIT */}
                    {/* <div className="form-group mt-4">
                <button type="button" className="btn btn-primary" onClick={() => router.push("/preference-from")} >
                  Create Profile
                </button>
              </div> */}
                  </form>
                  <div className="verify-profile">
                    <Link href="" onClick={() => setModalVerifiedProfile(true)}>
                      <FontAwesomeIcon icon={faShieldAlt} /> Verify My Profile
                    </Link>
                    <Link href="">Not Verified</Link>
                  </div>
                  <h4>Connect Accounts</h4>
                  <div className="verify-profile mt-3">
                    <button type="button" className="btn btn-primary">
                      <img src={'/images/instagram.png'} alt="" />
                      Instagram
                    </button>
                    <button type="button" className="btn btn-primary">
                      <img src={'/images/instagram.png'} alt="" /> Spotify
                    </button>
                  </div>
                  <button type="button" className="w-100 btn btn-primary mt-4">
                    Next
                  </button>
                </Col>
              </Row>
            </Col>
          </Row>
        </div>
        <VerifiedProfile
          show={modalShowVerifiedProfile}
          onHide={() => setModalVerifiedProfile(false)}
        />
      </DashboardLayout>
    </>
  );
}

// Edit Profile Modal

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

      <Modal.Body>
        {chat ? (
          <div className="report">
            <img src={'/images/question-1.png'} alt="" />
            <h4 className="text-center mb-2 mt-4 ">Upload Your Image</h4>
            <div className="form-group">
              <div className="icon-field">
                <label className="files">
                  <input type="File" className="form-control chose-file" aria-label="Choose File" />
                </label>
              </div>
            </div>
            <Button
              className="w-100 mt-3"
              type="button"
              onClick={() => {
                setChat(!chat);
              }}
            >
              Continue
            </Button>
            {/* <div className="btn-cstm mt-5">
             <Button className="w-100 mt-3 need-btn" type="button" >No need</Button>
           </div> */}
          </div>
        ) : (
          <>
            <div className="report">
              <img src={'/images/check-1.png'} alt="" />
              <h4 className="text-center mb-2 mt-4">Verified</h4>
              <p>Your Profile is verified Successfully</p>
              <Button className="w-100 mt-3 rprt-btn" onClick={() => router.reload()}>
                Go Back
              </Button>
            </div>
          </>
        )}
      </Modal.Body>
    </Modal>
  );
}