import {
  Button,
  Paper,
  TextField,
  Select,
  MenuItem,
  FormControl,
  InputLabel,
} from "@mui/material";
import { observer } from "mobx-react-lite";
import { ArrowLeft, Save } from "lucide-react";
import { Loader2 } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { carrierStore, cityStore, mediaStore } from "@shared";
import { useState, useEffect } from "react";
import { MediaViewer } from "@widgets";

export const CarrierCreatePage = observer(() => {
  const navigate = useNavigate();
  const [fullName, setFullName] = useState("");
  const [shortName, setShortName] = useState("");
  const [cityId, setCityId] = useState<number | null>(null);
  const [main_color, setMainColor] = useState("#000000");
  const [left_color, setLeftColor] = useState("#ffffff");
  const [right_color, setRightColor] = useState("#ff0000");
  const [slogan, setSlogan] = useState("");
  const [selectedMediaId, setSelectedMediaId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    cityStore.getCities("ru");
    mediaStore.getMedia();
  }, []);

  const handleCreate = async () => {
    try {
      setIsLoading(true);
      await carrierStore.createCarrier(
        fullName,
        shortName,
        cityStore.cities.ru.find((c) => c.id === cityId)?.name!,
        cityId!,
        main_color,
        left_color,
        right_color,
        slogan,
        selectedMediaId!
      );
      toast.success("Перевозчик успешно создан");
      navigate("/carrier");
    } catch (error) {
      toast.error("Ошибка при создании перевозчика");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Paper className="w-full h-full p-3 flex flex-col gap-10">
      <div className="flex items-center gap-4">
        <button
          className="flex items-center gap-2"
          onClick={() => navigate(-1)}
        >
          <ArrowLeft size={20} />
          Назад
        </button>
      </div>

      <div className="flex flex-col gap-10 w-full items-end">
        <FormControl fullWidth>
          <InputLabel>Город</InputLabel>
          <Select
            value={cityId || ""}
            label="Город"
            required
            onChange={(e) => setCityId(e.target.value as number)}
          >
            {cityStore.cities.ru.map((city) => (
              <MenuItem key={city.id} value={city.id}>
                {city.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <TextField
          fullWidth
          label="Полное название"
          value={fullName}
          required
          onChange={(e) => setFullName(e.target.value)}
        />

        <TextField
          fullWidth
          label="Короткое название"
          value={shortName}
          required
          onChange={(e) => setShortName(e.target.value)}
        />

        <div className="flex gap-4 w-full ">
          <TextField
            fullWidth
            label="Основной цвет"
            value={main_color}
            className="flex-1 w-full"
            onChange={(e) => setMainColor(e.target.value)}
            type="color"
            sx={{
              "& input": {
                height: "50px",
                paddingBlock: "14px",
                paddingInline: "14px",
                cursor: "pointer",
              },
            }}
          />
          <TextField
            fullWidth
            label="Цвет левого виджета"
            value={left_color}
            className="flex-1 w-full"
            onChange={(e) => setLeftColor(e.target.value)}
            type="color"
            sx={{
              "& input": {
                height: "50px",
                paddingBlock: "14px",
                paddingInline: "14px",
                cursor: "pointer",
              },
            }}
          />
          <TextField
            fullWidth
            label="Цвет правого виджета"
            value={right_color}
            className="flex-1 w-full"
            onChange={(e) => setRightColor(e.target.value)}
            type="color"
            sx={{
              "& input": {
                height: "50px",
                paddingBlock: "14px",
                paddingInline: "14px",
                cursor: "pointer",
              },
            }}
          />
        </div>

        <TextField
          fullWidth
          label="Слоган"
          value={slogan}
          onChange={(e) => setSlogan(e.target.value)}
        />

        <div className="w-full flex flex-col gap-4">
          <FormControl fullWidth>
            <InputLabel>Логотип</InputLabel>
            <Select
              value={selectedMediaId || ""}
              label="Логотип"
              required
              onChange={(e) => setSelectedMediaId(e.target.value as string)}
            >
              {mediaStore.media
                .filter((media) => media.media_type === 3)
                .map((media) => (
                  <MenuItem key={media.id} value={media.id}>
                    {media.media_name || media.filename}
                  </MenuItem>
                ))}
            </Select>
          </FormControl>
          {selectedMediaId && (
            <div className="w-32 h-32">
              <MediaViewer media={{ id: selectedMediaId, media_type: 1 }} />
            </div>
          )}
        </div>

        <Button
          variant="contained"
          className="w-min flex gap-2 items-center"
          startIcon={<Save size={20} />}
          onClick={handleCreate}
          disabled={
            isLoading || !fullName || !shortName || !cityId || !selectedMediaId
          }
        >
          {isLoading ? (
            <Loader2 size={20} className="animate-spin" />
          ) : (
            "Создать"
          )}
        </Button>
      </div>
    </Paper>
  );
});