bodyshop/client/src/components/production-board-kanban/production-board-kanban.settings.component.jsx

import { useMutation } from "@apollo/client";
import { Button, Card, Col, Form, notification, Popover, Row, Checkbox, Radio, Input, 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 ProductionBoardKanbanSettings({ associationSettings, parentLoading, onSettingsChange }) {
  const [form] = Form.useForm();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [hasChanges, setHasChanges] = useState(false);
  const [orientation, setOrientation] = useState(true); // Default to vertical

  const [updateKbSettings] = useMutation(UPDATE_KANBAN_SETTINGS);

  useEffect(() => {
    if (associationSettings?.kanban_settings) {
      form.setFieldsValue(associationSettings.kanban_settings);
      setOrientation(associationSettings.kanban_settings?.orientation ?? true);
    }
  }, [form, associationSettings, open]);

  const { t } = useTranslation();

  const handleFinish = async (values) => {
    setLoading(true);
    parentLoading(true);

    const result = await updateKbSettings({
      variables: {
        id: associationSettings?.id,
        ks: { ...values, orientation }
      }
    });
    if (result.errors) {
      notification.open({
        type: "error",
        message: t("production.errors.settings", {
          error: JSON.stringify(result.errors)
        })
      });
    }
    setOpen(false);
    setLoading(false);
    parentLoading(false);
    setHasChanges(false);
  };

  const handleValuesChange = () => {
    setHasChanges(true);
  };

  const handleOrientationChange = (checked) => {
    setOrientation(checked);
    setHasChanges(true);
  };

  const cardStyle = { minWidth: "50vw", marginTop: 10 };

  const renderCardSettings = () => (
    <>
      <Card title={t("production.settings.layout")} style={cardStyle}>
        <Row gutter={[16, 16]}>
          <Col span={4}>
            <Form.Item valuePropName="checked" label={t("production.labels.orientation")}>
              <Switch
                checkedChildren="Vertical"
                unCheckedChildren="Horizontal"
                checked={orientation}
                onChange={handleOrientationChange}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={24}>
            <Form.Item name="cardSize" label={t("production.labels.card_size")}>
              <Radio.Group>
                <Radio.Button value="compact">{t("production.options.small")}</Radio.Button>
                <Radio.Button value="medium">{t("production.options.medium")}</Radio.Button>
                <Radio.Button value="large">{t("production.options.large")}</Radio.Button>
              </Radio.Group>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={[16, 16]}>
          <Col span={4}>
            <Form.Item name="compact" valuePropName="checked">
              <Checkbox>{t("production.labels.compact")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="cardcolor" valuePropName="checked">
              <Checkbox>{t("production.labels.cardcolor")}</Checkbox>
            </Form.Item>
          </Col>
        </Row>
      </Card>
      <Card title={t("production.settings.information")} style={cardStyle}>
        <Row gutter={[16, 16]}>
          <Col span={4}>
            <Form.Item name="model_info" valuePropName="checked">
              <Checkbox>{t("production.labels.model_info")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="ownr_nm" valuePropName="checked">
              <Checkbox>{t("production.labels.ownr_nm")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="clm_no" valuePropName="checked">
              <Checkbox>{t("production.labels.clm_no")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="ins_co_nm" valuePropName="checked">
              <Checkbox>{t("production.labels.ins_co_nm")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="employeeassignments" valuePropName="checked">
              <Checkbox>{t("production.labels.employeeassignments")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="actual_in" valuePropName="checked">
              <Checkbox>{t("production.labels.actual_in")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="scheduled_completion" valuePropName="checked">
              <Checkbox>{t("production.labels.scheduled_completion")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="ats" valuePropName="checked">
              <Checkbox>{t("production.labels.ats")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="production_note" valuePropName="checked">
              <Checkbox>{t("production.labels.production_note")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="sublets" valuePropName="checked">
              <Checkbox>{t("production.labels.sublets")}</Checkbox>
            </Form.Item>
          </Col>
          <Col span={4}>
            <Form.Item name="partsstatus" valuePropName="checked">
              <Checkbox>{t("production.labels.partsstatus")}</Checkbox>
            </Form.Item>
          </Col>
        </Row>
      </Card>
    </>
  );

  const overlay = (
    <Card>
      <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
        {renderCardSettings()}
        <Form.Item name="orientation" style={{ display: "none" }}>
          <Input type="hidden" value={orientation} />
        </Form.Item>
        <Row justify="center" style={{ marginTop: 15 }} gutter={16}>
          <Col span={8}>
            <Button block onClick={() => setOpen(false)}>
              {t("general.actions.cancel")}
            </Button>
          </Col>
          <Col span={8}>
            <Button block onClick={() => form.submit()} loading={loading} type="primary" disabled={!hasChanges}>
              {t("general.actions.save")}
            </Button>
          </Col>
        </Row>
      </Form>
    </Card>
  );

  return (
    <Popover content={overlay} open={open} placement="topRight">
      <Button loading={loading} onClick={() => setOpen(!open)}>
        {t("production.settings.board_settings")}
      </Button>
    </Popover>
  );
}