import { useMutation } from "@apollo/client/react";
import { Button, Card, Dropdown, Form, InputNumber, Space } from "antd";
import dayjs from "../../utils/day";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_SCOREBOARD_ENTRY } from "../../graphql/scoreboard.queries";
import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
import { logImEXEvent } from "../../firebase/firebase.utils.js";

export default function ScoreboardEntryEdit({ entry }) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [updateScoreboardentry] = useMutation(UPDATE_SCOREBOARD_ENTRY);
  const notification = useNotification();

  const handleFinish = async (values) => {
    setLoading(true);
    logImEXEvent("scoreboard_edit_job", {});
    values.date = dayjs(values.date).format("YYYY-MM-DD");
    const result = await updateScoreboardentry({
      variables: { sbId: entry.id, sbInput: values }
    });

    if (result.errors) {
      notification.error({
        title: t("scoreboard.errors.updating", {
          message: JSON.stringify(result.errors)
        })
      });
      return;
    } else {
      notification.success({
        title: t("scoreboard.successes.updated")
      });
      setOpen(false);
    }
    setLoading(false);
  };

  const menu = {
    items: [
      {
        key: "1",
        label: (
          <Card style={{ padding: "1rem" }}>
            <Form layout="vertical" initialValues={entry} onFinish={handleFinish} onClick={(e) => e.stopPropagation()}>
              <Form.Item
                label={t("scoreboard.fields.date")}
                name="date"
                rules={[
                  {
                    required: true
                    //message: t("general.validation.required"),
                  }
                ]}
              >
                <DateTimePicker isDateOnly />
              </Form.Item>
              <Form.Item
                label={t("scoreboard.fields.bodyhrs")}
                name="bodyhrs"
                rules={[
                  {
                    required: true
                    //message: t("general.validation.required"),
                  }
                ]}
              >
                <InputNumber precision={1} />
              </Form.Item>
              <Form.Item
                label={t("scoreboard.fields.painthrs")}
                name="painthrs"
                rules={[
                  {
                    required: true
                    //message: t("general.validation.required"),
                  }
                ]}
              >
                <InputNumber precision={1} />
              </Form.Item>
              <Space wrap>
                <Button type="primary" loading={loading} htmlType="submit">
                  {t("general.actions.save")}
                </Button>
                <Button onClick={() => setOpen(false)}>{t("general.actions.cancel")}</Button>
              </Space>
            </Form>
          </Card>
        )
      }
    ]
  };

  return (
    <div>
      <Dropdown open={open} menu={menu}>
        <Button
          onClick={(e) => {
            e.stopPropagation();
            setOpen(true);
          }}
        >
          {t("scoreboard.actions.edit")}
        </Button>
      </Dropdown>
    </div>
  );
}
