import { PredictResponseType } from '@/shared/types/predict';
import { FormEvent } from 'react';
import classes from './styles.module.scss';
import { Button } from '@/shared/components/button';
import { Selector } from '@/shared/components/selector';
import { Expander } from '@/shared/components/expander';

type FormType<T> = {
  selectorsData: T | undefined;
  updateField: (field: keyof T, value: string | number) => void;
  handleGetPredict: (e: FormEvent) => Promise<void>;
  response: PredictResponseType;
};

const Form = <T extends Record<string, string[] | number[]>>({
  selectorsData,
  updateField,
  handleGetPredict,
  response,
}: FormType<T>) => {
  const fields = selectorsData
    ? (Object.keys(selectorsData) as Array<keyof T>)
    : [];

  return (
    <form className={classes.form}>
      <div className={classes.selectorList}>
        {fields.map((field) => (
          <Expander key={field as string} title={field as string}>
            <Selector
              handleSetValue={updateField}
              list={selectorsData ? selectorsData[field] : []}
              field={field as string}
            />
          </Expander>
        ))}
      </div>
      <Button onClick={(e: FormEvent) => handleGetPredict(e)}>Submit</Button>
      {response.predicted_price !== undefined && (
        <span style={{ color: 'white' }}>
          Ответ: {response.predicted_price}
        </span>
      )}
    </form>
  );
};

export default Form;