import React from 'react';

import { Input, InlineFieldRow, InlineField, Select } from '@grafana/ui';

import { NodesQuery, TestData } from '../dataquery.gen';

export interface Props {
  onChange: (value: NodesQuery) => void;
  query: TestData;
}
export function NodeGraphEditor({ query, onChange }: Props) {
  const type = query.nodes?.type || 'random';
  return (
    <InlineFieldRow>
      <InlineField label="Data type" labelWidth={14}>
        <Select<NodesQuery['type']>
          options={options.map((o) => ({
            label: o,
            value: o,
          }))}
          value={options.find((item) => item === type)}
          onChange={(value) => onChange({ ...query.nodes, type: value.value! })}
          width={32}
        />
      </InlineField>
      {(type === 'random' || type === 'random edges') && (
        <>
          <InlineField label="Count" labelWidth={14}>
            <Input
              type="number"
              name="count"
              value={query.nodes?.count}
              width={32}
              onChange={(e) =>
                onChange({ ...query.nodes, count: e.currentTarget.value ? parseInt(e.currentTarget.value, 10) : 0 })
              }
              placeholder="10"
            />
          </InlineField>
          <InlineField label="Seed" labelWidth={14}>
            <Input
              type="number"
              name="seed"
              value={query.nodes?.seed}
              width={16}
              onChange={(e) =>
                onChange({ ...query.nodes, seed: e.currentTarget.value ? parseInt(e.currentTarget.value, 10) : 0 })
              }
            />
          </InlineField>
        </>
      )}
    </InlineFieldRow>
  );
}

const options: Array<NodesQuery['type']> = ['random', 'response_small', 'response_medium', 'random edges'];