import { Button, Field, Input } from "@fluentui/react-components";
import { LinkEdit24Regular } from "@fluentui/react-icons";
import type { FilterConfig } from "../../types/config";
import { useFilterRawFile } from "../../hooks/useFilterRawFile";
import { FilterForm } from "./FilterForm";
import { RawConfigSection } from "./RawConfigSection";
import { useConfigStyles } from "./configStyles";

interface FilterDetailProps {
  filter: FilterConfig;
  onAssignClick: () => void;
}

export function FilterDetail({ filter, onAssignClick }: FilterDetailProps): React.JSX.Element {
  const styles = useConfigStyles();
  const { fetchRawContent, saveRawContent } = useFilterRawFile(filter.name);

  return (
    <div>
      <div className={styles.fieldRow} style={{ marginBottom: "var(--spacingVerticalS)" }}>
        <Field label="Source file">
          <Input
            readOnly
            value={filter.source_file || filter.filename}
            className={styles.codeInput}
            size="small"
          />
        </Field>
      </div>

      <FilterForm name={filter.name} />

      <div style={{ marginTop: "var(--spacingVerticalM)" }}>
        <Button appearance="secondary" icon={<LinkEdit24Regular />} onClick={onAssignClick}>
          Assign to Jail
        </Button>
      </div>

      <div style={{ marginTop: "var(--spacingVerticalL)" }}>
        <RawConfigSection
          fetchContent={fetchRawContent}
          saveContent={saveRawContent}
          label="Raw Filter Configuration"
        />
      </div>
    </div>
  );
}
