import { useMutation } from "@apollo/client";
import {
  Button,
  Card,
  Col,
  Form,
  notification,
  Popover,
  Radio,
  Row,
  Switch,
} from "antd";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { UPDATE_KANBAN_SETTINGS } from "../../graphql/user.queries";

export default function ProductionBoardKanbanCardSettings({
  associationSettings,
}) {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);

  useEffect(() => {
    form.setFieldsValue(
      associationSettings && associationSettings.kanban_settings
    );
  }, [form, associationSettings, visible]);

  const { t } = useTranslation();

  const handleFinish = async (values) => {
    setLoading(true);
    const result = await updateKbSettings({
      variables: {
        id: associationSettings && associationSettings.id,
        ks: values,
      },
    });
    if (result.errors) {
      notification.open({
        type: "error",
        message: t("production.errors.settings", {
          error: JSON.stringify(result.errors),
        }),
      });
    }
    setVisible(false);
    setLoading(false);
  };

  const overlay = (
    <div>
      <Card>
        <Form form={form} onFinish={handleFinish} layout="vertical">
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Form.Item
                label={t("production.labels.compact")}
                name="compact"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.ownr_nm")}
                name="ownr_nm"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.clm_no")}
                name="clm_no"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.ins_co_nm")}
                name="ins_co_nm"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.laborhrs")}
                name="laborhrs"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.employeeassignments")}
                name="employeeassignments"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.scheduled_completion")}
                name="scheduled_completion"
              >
                <Switch />
              </Form.Item>{" "}
            </Col>
            <Col span={12}>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.ats")}
                name="ats"
              >
                <Switch />
              </Form.Item>
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.production_note")}
                name="production_note"
              >
                <Switch />
              </Form.Item>
              {/* <Form.Item
              valuePropName='checked' label={t("production.labels.alert")} name="alert">
                <Switch/>
              </Form.Item> */}
              <Form.Item
                valuePropName="checked"
                label={t("production.labels.sublets")}
                name="sublets"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Button
          onClick={() => {
            form.submit();
          }}
        >
          {t("general.actions.save")}
        </Button>
      </Card>
    </div>
  );
  return (
    <Popover content={overlay} visible={visible}>
      <Button loading={loading} onClick={() => setVisible(true)}>
        {t("production.labels.cardsettings")}
      </Button>
    </Popover>
  );
}