import React, { FC, useState } from 'react';
import { NotificationChannelOption } from 'app/types';
import { FieldError, DeepMap, useFormContext } from 'react-hook-form';
import { OptionField } from './OptionField';
import { Button, useStyles2 } from '@grafana/ui';
import { ActionIcon } from '../../../rules/ActionIcon';
import { getReceiverFormFieldStyles } from './styles';

interface Props {
  defaultValue: any;
  option: NotificationChannelOption;
  pathPrefix: string;
  errors?: DeepMap<any, FieldError>;
}

export const SubformField: FC<Props> = ({ option, pathPrefix, errors, defaultValue }) => {
  const styles = useStyles2(getReceiverFormFieldStyles);
  const name = `${pathPrefix}${option.propertyName}`;
  const { watch } = useFormContext();
  const _watchValue = watch(name);
  const value = _watchValue === undefined ? defaultValue : _watchValue;

  const [show, setShow] = useState(!!value);

  return (
    <div className={styles.wrapper} data-testid={`${name}.container`}>
      <h6>{option.label}</h6>
      {option.description && <p className={styles.description}>{option.description}</p>}
      {show && (
        <>
          <ActionIcon
            data-testid={`${name}.delete-button`}
            icon="trash-alt"
            tooltip="delete"
            onClick={() => setShow(false)}
            className={styles.deleteIcon}
          />
          {(option.subformOptions ?? []).map((subOption) => {
            return (
              <OptionField
                defaultValue={defaultValue?.[subOption.propertyName]}
                key={subOption.propertyName}
                option={subOption}
                pathPrefix={`${name}.`}
                error={errors?.[subOption.propertyName]}
              />
            );
          })}
        </>
      )}
      {!show && (
        <Button
          className={styles.addButton}
          type="button"
          variant="secondary"
          icon="plus"
          size="sm"
          onClick={() => setShow(true)}
          data-testid={`${name}.add-button`}
        >
          Add
        </Button>
      )}
    </div>
  );
};
