import {
  CheckCircleFilled,
  FileAddFilled,
  FolderOpenFilled,
  WarningFilled,
} from "@ant-design/icons";
import { Button, Card, Input, Modal, Select, Space, Table, Tag } from "antd";
import { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  PaintScaleConfig,
  PaintScaleType,
  paintScaleTypeOptions,
} from "./PaintScale/types";
import { usePaintScaleConfig } from "./PaintScale/usePaintScaleConfig";

const SettingsPaintScaleOutputPaths: FC = () => {
  const { t } = useTranslation();
  const {
    paintScaleConfigs,
    handleAddConfig,
    handleRemoveConfig,
    handlePathChange,
    handlePollingIntervalChange,
  } = usePaintScaleConfig("output");

  const [isModalVisible, setIsModalVisible] = useState(false);
  const [selectedType, setSelectedType] = useState<PaintScaleType | null>(null);

  // Show modal when adding a new path
  const showAddPathModal = () => {
    setSelectedType(null);
    setIsModalVisible(true);
  };

  // Handle modal confirmation
  const handleModalOk = () => {
    if (selectedType) {
      handleAddConfig(selectedType);
      setIsModalVisible(false);
    }
  };

  // Handle modal cancellation
  const handleModalCancel = () => {
    setIsModalVisible(false);
  };

  // Table columns for paint scale configs
  const columns = [
    {
      title: t("settings.labels.paintScaleType"),
      dataIndex: "type",
      key: "type",
      render: (type: PaintScaleType) => {
        const typeOption = paintScaleTypeOptions.find(
          (option) => option.value === type,
        );
        const label = typeOption ? typeOption.label : type;
        const colorMap: Partial<Record<PaintScaleType, string>> = {
          [PaintScaleType.PPG]: "blue",
          // Add other types and colors as needed
        };
        return <Tag color={colorMap[type] || "default"}>{label}</Tag>;
      },
    },
    {
      title: t("settings.labels.paintScalePath"),
      dataIndex: "path",
      key: "path",
      render: (path: string | null, record: PaintScaleConfig) => {
        const isValid = path && path.trim() !== "";
        return (
          <Space>
            <Input
              value={path || ""}
              placeholder={t("settings.labels.paintScalePath")}
              disabled
              style={{
                borderColor: isValid ? "#52c41a" : "#d9d9d9",
              }}
              suffix={
                isValid ? (
                  <CheckCircleFilled style={{ color: "#52c41a" }} />
                ) : (
                  <WarningFilled style={{ color: "#faad14" }} />
                )
              }
            />
            <Button
              onClick={() => handlePathChange(record.id)}
              icon={<FolderOpenFilled />}
            />
          </Space>
        );
      },
    },
    {
      title: t("settings.labels.pollingInterval"),
      dataIndex: "pollingInterval",
      key: "pollingInterval",
      render: (pollingInterval: number, record: PaintScaleConfig) => (
        <Input
          type="number"
          value={pollingInterval}
          onChange={(e) =>
            handlePollingIntervalChange(record.id, Number(e.target.value))
          }
          style={{ width: 100 }}
          placeholder={t("settings.labels.pollingInterval")}
        />
      ),
    },
    {
      title: t("settings.labels.actions"),
      key: "actions",
      render: (_: any, record: PaintScaleConfig) => (
        <Button danger onClick={() => handleRemoveConfig(record.id)}>
          {t("settings.labels.remove")}
        </Button>
      ),
    },
  ];

  return (
    <>
      <Card
        title={t("settings.labels.paintScaleSettingsOutput")}
        extra={
          <Button onClick={showAddPathModal} icon={<FileAddFilled />}>
            {t("settings.actions.addpath")}
          </Button>
        }
      >
        <Table
          dataSource={paintScaleConfigs}
          columns={columns}
          rowKey="id"
          pagination={false}
        />
      </Card>

      <Modal
        title={t("settings.labels.selectPaintScaleType")}
        open={isModalVisible}
        onOk={handleModalOk}
        onCancel={handleModalCancel}
        okButtonProps={{ disabled: !selectedType }}
      >
        <Select
          value={selectedType}
          options={paintScaleTypeOptions}
          onChange={(value) => setSelectedType(value)}
          style={{ width: "100%" }}
          placeholder={t("settings.labels.selectPaintScaleType")}
        />
      </Modal>
    </>
  );
};

export default SettingsPaintScaleOutputPaths;
