import React, { useEffect, useRef } from 'react';
import { Form } from 'react-aria-components';
import { useTranslation } from 'react-i18next';

import { Button } from '@actual-app/components/button';
import { Input } from '@actual-app/components/input';
import { SpaceBetween } from '@actual-app/components/space-between';
import { Text } from '@actual-app/components/text';
import { theme } from '@actual-app/components/theme';

import { FormField, FormLabel } from '#components/forms';

export function NameFilter({
  menuItem,
  name,
  setName,
  adding,
  onAddUpdate,
  err,
}: {
  menuItem: string;
  name: string;
  setName: (item: string) => void;
  adding: boolean;
  onAddUpdate: () => void;
  err: string | null;
}) {
  const { t } = useTranslation();
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <>
      {menuItem !== 'update-filter' && (
        <Form
          onSubmit={e => {
            e.preventDefault();
            onAddUpdate();
          }}
        >
          <SpaceBetween
            style={{
              padding: 10,
              justifyContent: 'flex-end',
              alignItems: 'center',
            }}
          >
            <FormField style={{ flex: 1 }}>
              <FormLabel
                title={t('Filter name')}
                htmlFor="name-field"
                style={{ userSelect: 'none' }}
              />
              <Input
                id="name-field"
                ref={inputRef}
                defaultValue={name || ''}
                onChangeValue={setName}
              />
            </FormField>
            <Button variant="primary" type="submit" style={{ marginTop: 18 }}>
              {adding ? t('Add') : t('Update')}
            </Button>
          </SpaceBetween>
        </Form>
      )}
      {err && (
        <SpaceBetween style={{ padding: 10, alignItems: 'center' }}>
          <Text style={{ color: theme.errorText }}>{err}</Text>
        </SpaceBetween>
      )}
    </>
  );
}
