"use client";

import "./CreateReportPage.scss";
import HeaderText from "@/Shared/UI/HeaderText/HeaderText";
import CreateReportMap from "@/Features/CreateReportMap/CreateReportMap";
import paperclip__icon from "./icons/paperclip.svg";
import { useState } from "react";
import Image from "next/image";
import arrow_right_icon from "./icons/arrow-right.svg";
import { LatLng } from "leaflet";

const CreateReportPage = () => {
  const [location, setLocation] = useState<LatLng[]>([]);
  const [images, setImages] = useState<File[]>();
  const [description, setdescription] = useState<string>("");

  const handleImages = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setImages(Array.from(e.target.files));
    }
  };

  const deleteImage = (name: string) => {
    setImages((prev) => prev?.filter((image) => image.name !== name));
  };

  return (
    <div className="create-report">
      <HeaderText>Написать обращение</HeaderText>

      <div className="create-report__wrapper">
        <div className="input-label">
          <h5>Адрес</h5>
          <input type="text" placeholder="Выберите точки на карте" />
        </div>

        <CreateReportMap
          markers={location}
          setMarkers={setLocation}
        />

        <div className="input-label">
          <h5>Добавьте описание проблемы</h5>
          <input
            value={description}
            onChange={(e) => setdescription(e.target.value)}
            type="text"
            placeholder="Введите описание"
          />
        </div>

        <div className="create-report__add-image">
          <h5>Добавьте фотографии</h5>
          <p>
            Загрузите до 5 фотографии, связанные с дорогой, которую Вы
            хотите отметить. Фотографии помогут лучше понять проблему.
          </p>
          <input
            onChange={handleImages}
            type="file"
            id="report-add-image"
            multiple
          />
          <label htmlFor="report-add-image">
            <Image src={paperclip__icon} alt="Paper Clip Icon" />
            Прикрепить файл <span>(до 5 МБ)</span>
          </label>

          <div className="create-report__images">
            {images?.map((image) => (
              <div>
                <img
                  src={URL.createObjectURL(image)}
                  key={image.name}
                  alt="Report Image"
                />
                <button onClick={() => deleteImage(image.name)}>
                  удалить
                </button>
              </div>
            ))}
          </div>

          <button className="create-report__btn">
            Отправить на модерацию
            <Image src={arrow_right_icon} alt="Arrow Right Icon" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default CreateReportPage;
