price-builder-frontend/src/widgets/form/form.widget.tsx

import api from '@/shared/api/api';
import {
  PredictRequestType,
  PredictResponseType,
} from '@/shared/types/predict';
import { FormEvent, useCallback, useState } from 'react';
import classes from './styles.module.scss';
import { Button } from '@/shared/components/button';
import { Selector } from '@/shared/components/selector';

// MockUp Selectors data options
const mockUpOptions: { [key: string]: string[] | number[] } = {
  brand: [
    'Dell',
    'HP',
    'Lenovo',
    'Apple',
    'Asus',
    'Acer',
    'MSI',
    'Microsoft',
    'Samsung',
    'Toshiba',
  ],
  processor: [
    'Intel Core i3 10th Gen',
    'Intel Core i5 10th Gen',
    'Intel Core i7 10th Gen',
    'AMD Ryzen 3 4000 Series',
    'AMD Ryzen 5 4000 Series',
    'AMD Ryzen 7 4000 Series',
  ],
  os: ['Windows 10', 'Windows 11', 'macOS', 'Linux'],
  gpu: [
    'Integrated',
    'NVIDIA GeForce GTX 1650',
    'NVIDIA GeForce RTX 3060',
    'AMD Radeon RX 5600M',
  ],
  display: [13.3, 14.0, 15.6, 17.3],
  display_type: ['HD', 'Full HD', '4K', 'OLED'],
  ram: [4, 8, 16, 32],
  ssd: [0, 256, 512, 1024],
  weight: [1.2, 1.5, 2.0, 2.5, 3.0],
  battery_size: [45, 60, 70, 90, 100],
  release_year: [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024],
};

const Form = () => {
  const [request, setRequest] = useState<PredictRequestType>({
    brand: 'Apple',
    processor: 'Core i5 10th Gen',
    ram: 16,
    os: 'Windows 11',
    ssd: 1024,
    display: 15.3,
    gpu: 'NVIDIA GeForce RTX 3060',
    weight: 2.0,
    battery_size: 90,
    release_year: 2023,
    display_type: '4K',
  });
  const [response, setResponse] = useState<PredictResponseType>({
    predicted_price: -1,
  });

  const fields = Object.keys(request);

  const handleInputChange = useCallback(
    (updatedRequest: PredictRequestType) => {
      setRequest(updatedRequest);
    },
    [],
  );

  const updateField = (field: string, value: string) => {
    handleInputChange({
      ...request,
      [field]: value,
    });
  };

  const handleGetPredict = async (event: FormEvent) => {
    event.preventDefault();
    console.log(request);
    const newResponse = await api.predictPrice(request);
    setResponse(newResponse);
  };

  return (
    <form className={classes.form}>
      <div className={classes.selectorList}>
        {fields.map((field) => (
          <Selector
            key={field}
            handleSetValue={updateField}
            list={mockUpOptions[field]}
            field={field}
          />
        ))}
      </div>
      <Button
        onClick={(e: FormEvent) => handleGetPredict(e)}
        label={'Отправить'}
      />
      {response && (
        <span style={{ color: 'white' }}>
          Ответ: {response.predicted_price}
        </span>
      )}
    </form>
  );
};

export default Form;