import React from 'react';
import { useAppDispatch, useSchemaSettings } from '../../data-access';
import { SchemaConnectionTypes, schemaConnectionTypeArray, setSchemaSettings } from '../../data-access/store/schemaSlice';
import { Input } from '../../components/inputs';
import { Layouts } from '../../graph-layout';

export const SchemaSettings = () => {
  const settings = useSchemaSettings();
  const dispatch = useAppDispatch();

  return (
    <div className="flex flex-col w-full gap-2 px-4 py-2">
      <span className="text-xs font-bold">Schema Settings</span>
      <Input
        type="boolean"
        value={settings.animatedEdges}
        label="Animated Edges"
        onChange={(value: boolean) => {
          dispatch(setSchemaSettings({ ...settings, animatedEdges: value as any }));
        }}
      />
      <Input
        type="boolean"
        value={settings.showMinimap}
        label="Show Minimap"
        onChange={(value: boolean) => {
          dispatch(setSchemaSettings({ ...settings, showMinimap: value as any }));
        }}
      />
      <Input
        type="dropdown"
        label="Type of Connection"
        inline
        size="sm"
        value={settings.connectionType}
        options={schemaConnectionTypeArray}
        onChange={(value: string | number) => {
          dispatch(setSchemaSettings({ ...settings, connectionType: value as SchemaConnectionTypes }));
        }}
      />
      <Input
        type="dropdown"
        label="Layout Type"
        inline
        size="sm"
        value={settings.layoutName}
        options={Object.values(Layouts)}
        onChange={(value: string | number) => {
          dispatch(setSchemaSettings({ ...settings, layoutName: value as any }));
        }}
      />
    </div>
  );
};