import React from "react";
import { Form, InputProps } from "antd";
import { Text } from "../Typography";
import { FieldProps } from "formik";
import classNames from "classnames";
import SelectTimeDuration from "components/SelectTimeDuration";

interface Props extends FieldProps<InputProps> {
  name: string;
  label: string;
  description: string;
  className?: string;
  labelClassName?: string;
  descriptionClassName?: string;
  placeholder?: string;
  submitCount?: number;
}

export const AntSelectDuration: React.FC<Props> = ({
  description,
  field,
  form,
  label,
  className,
  labelClassName,
  descriptionClassName,
  submitCount,
}) => {
  const value = form.values[field.name];
  const touched = form.touched[field.name];
  const submitted = submitCount && submitCount > 0;
  const hasError = form.errors[field.name];
  const submittedError = hasError && submitted;
  const touchedError = hasError && touched;

  const onValueChange = (value: number) => {
    form.setFieldValue(field.name, value);
  };

  return (
    <div className={className}>
      {label && (
        <Text className={classNames("d--block", labelClassName)}>{label}</Text>
      )}
      {description && (
        <Text className={classNames("d--block m__b--8", descriptionClassName)}>
          {description}
        </Text>
      )}
      <Form.Item
        help={submittedError || touchedError ? hasError : false}
        validateStatus={submittedError || touchedError ? "error" : "success"}
      >
        <SelectTimeDuration
          minuteFilter={(value) => value <= 30}
          secondsFilter={(value) => value % 15 === 0 && value < 60}
          value={value}
          onChange={onValueChange}
        />
      </Form.Item>
    </div>
  );
};
