internet-programming/1 семестр/lab4/src/pages/PageEdit.jsx

import { useState } from 'react';
import { Container, Col, Row, Form, Button } from 'react-bootstrap';

const PageEdit = () => {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
      const form = event.currentTarget;
      if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
      }

      setValidated(true);
  };

  const [selectedItem, setSelectedItem] = useState('');
  const [price, setPrice] = useState(0.00);
  const [stock, setStock] = useState(0);
  const [count, setCount] = useState(0);
  const [imagePreview, setImagePreview] = useState('https://via.placeholder.com/200');

  const handleItemChange = (e) => {
    setSelectedItem(e.target.value);
  };

  const handlePriceChange = (e) => {
    setPrice(parseFloat(e.target.value));
  };

  const handleStockChange = (e) => {
    setStock(parseInt(e.target.value, 10));
  };

  const handleCountChange = (e) => {
    setCount(parseInt(e.target.value, 10));
  };

  const handleImageChange = (e) => {
    const file = e.target.files[0];
  
    if (file) {
      const reader = new FileReader();
  
      reader.onloadend = () => {
        const img = new Image();
        img.src = reader.result;
  
        img.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
  
          const maxWidth = 200;
          const maxHeight = 200;
          let width = img.width;
          let height = img.height;
  
          if (width > height) {
            if (width > maxWidth) {
              height *= maxWidth / width;
              width = maxWidth;
            }
          } else {
            if (height > maxHeight) {
              width *= maxHeight / height;
              height = maxHeight;
            }
          }
  
          canvas.width = width;
          canvas.height = height;
  
          ctx.drawImage(img, 0, 0, width, height);
  
          setImagePreview(canvas.toDataURL('image/png'));
        };
      };
  
      reader.readAsDataURL(file);
    }
  };

  return (
    <Container fluid className="p-2">
      <h1 className="text-warning text-center font-weight-bold">Добавление товара</h1>
      <Row className="text-center">
        <Col>
          <img id="image-preview" src={imagePreview} className="rounded rounded-circle" alt="placeholder" />
        </Col>
      </Row>
      <Form
        id="items-form"
        className="needs-validation"
        noValidate
        validated={validated}
        onSubmit={handleSubmit}
      >
        <Form.Group controlId="item" className="mb-2">
          <Form.Label>Товары</Form.Label>
          <Form.Control
            as="select"
            name="selected"
            onChange={handleItemChange}
            value={selectedItem}
            required
          >
          </Form.Control>
          <Form.Control.Feedback type="invalid">Пожалуйста, выберите товар.</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="price" className="mb-2">
          <Form.Label>Цена</Form.Label>
          <Form.Control
            type="number"
            name="price"
            value={price}
            min="1000.00"
            step="0.50"
            onChange={handlePriceChange}
            required
          />
          <Form.Control.Feedback type="invalid">Пожалуйста, введите цену.</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="stock" className="mb-2">
          <Form.Label>Акция</Form.Label>
          <Form.Control
            type="number"
            name="price"
            value={stock}
            min="0"
            step="1"
            onChange={handleStockChange}
            required
          />
          <Form.Control.Feedback type="invalid">Пожалуйста, введите акцию.</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="count" className="mb-2">
          <Form.Label>Количество</Form.Label>
          <Form.Control
            type="number"
            name="count"
            value={count}
            min="1"
            step="1"
            onChange={handleCountChange}
            required
          />
          <Form.Control.Feedback type="invalid">Пожалуйста, введите количество.</Form.Control.Feedback>
        </Form.Group>
        <Form.Group controlId="image" className="mb-2">
          <Form.Label>Изображение</Form.Label>
          <Form.Control
            type="file"
            name="image"
            accept="image/*"
            onChange={handleImageChange}
          />
          <Form.Control.Feedback type="invalid">Пожалуйста, выберите изображение.</Form.Control.Feedback>
        </Form.Group>
        <Row className="mb-2">
          <Col>
            <Button href="Administrator" className="btn btn-secondary">Назад</Button>
            <Button type="submit" className="btn btn-primary">Сохранить</Button>
          </Col>
        </Row>
      </Form>
    </Container>
  );
};

export default PageEdit;