import { useState } from 'react';
import style from './Counter.module.css';

export const Counter = () => {
  const [count, setCount] = useState(0); // возвращает массив из двух элементов, первый элемент - значение стейта, второй элемент - функция для изменения стейта

  return (
    <div className={style.counter}>
      <p>{count}</p>
      <div className={style.btns}>
        <button className={style.button} onClick={() => setCount(count + 1)}>+</button>
        <button className={style.button} onClick={() => setCount(count - 1)}>-</button>
      </div>
    </div>
  )
}

import { useState, FormEvent, ChangeEvent } from 'react';
import styles from './Form.module.css';

interface FormData {
  name: string;
  email: string;
  message: string;
}

export const ContactForm = () => {
  // Создаем состояние для хранения данных формы
  const [formData, setFormData] = useState<FormData>({
    name: '',
    email: '',
    message: ''
  });
  
  // Состояние для отображения сообщения об успешной отправке
  const [isSubmitted, setIsSubmitted] = useState(false);
  
  // Обработчик изменения полей ввода
  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    
    // Обновляем состояние, сохраняя предыдущие значения и изменяя только нужное поле
    setFormData(prevData => ({
      ...prevData,
      [name]: value
    }));
  };
  
  // Обработчик отправки формы
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // Предотвращаем стандартное поведение формы (перезагрузку страницы)
    
    // Здесь обычно был бы код для отправки данных на сервер
    console.log('Отправленные данные:', formData);
    
    // Показываем сообщение об успешной отправке
    setIsSubmitted(true);
    
    // Сбрасываем форму через 3 секунды
    setTimeout(() => {
      setFormData({
        name: '',
        email: '',
        message: ''
      });
      setIsSubmitted(false);
    }, 3000);
  };
  
  return (
    <div className={styles.formContainer}>
      <h2>Свяжитесь с нами</h2>
      
      {isSubmitted ? (
        <div className={styles.successMessage}>
          Спасибо! Ваше сообщение отправлено.
        </div>
      ) : (
        <form onSubmit={handleSubmit} className={styles.form}>
          <div className={styles.formGroup}>
            <label htmlFor="name">Имя:</label>
            <input
              type="text"
              id="name"
              name="name"
              value={formData.name}
              onChange={handleChange}
              required
              className={styles.input}
            />
          </div>
          
          <div className={styles.formGroup}>
            <label htmlFor="email">Email:</label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              required
              className={styles.input}
            />
          </div>
          
          <div className={styles.formGroup}>
            <label htmlFor="message">Сообщение:</label>
            <textarea
              id="message"
              name="message"
              value={formData.message}
              onChange={handleChange}
              required
              className={styles.textarea}
              rows={5}
            />
          </div>
          
          <button type="submit" className={styles.submitButton}>
            Отправить
          </button>
        </form>
      )}
    </div>
  );
};

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import styles from './ZodForm.module.css';

// Определение схемы валидации с помощью Zod
const userSchema = z.object({
  username: z.string()
    .min(3, 'Имя пользователя должно содержать минимум 3 символа')
    .max(20, 'Имя пользователя должно содержать максимум 20 символов'),
  email: z.string()
    .email('Введите корректный email адрес'),
  age: z.number({ invalid_type_error: 'Возраст должен быть числом' })
    .int('Возраст должен быть целым числом')
    .positive('Возраст должен быть положительным числом')
    .min(18, 'Вам должно быть не менее 18 лет')
    .max(120, 'Введите корректный возраст'),
  website: z.string()
    .url('Введите корректный URL')
    .optional()
    .or(z.literal('')),
  password: z.string()
    .min(8, 'Пароль должен содержать минимум 8 символов')
    .regex(/[A-Z]/, 'Пароль должен содержать хотя бы одну заглавную букву')
    .regex(/[0-9]/, 'Пароль должен содержать хотя бы одну цифру')
    .regex(/[^A-Za-z0-9]/, 'Пароль должен содержать хотя бы один специальный символ'),
  confirmPassword: z.string(),
  terms: z.literal(true, {
    errorMap: () => ({ message: 'Вы должны принять условия использования' })
  })
}).refine(data => data.password === data.confirmPassword, {
  message: 'Пароли не совпадают',
  path: ['confirmPassword']
});

// Вывод типа из схемы Zod
type UserFormData = z.infer<typeof userSchema>;

export const ZodValidationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset
  } = useForm<UserFormData>({
    resolver: zodResolver(userSchema),
    defaultValues: {
      username: '',
      email: '',
      age: undefined,
      website: '',
      password: '',
      confirmPassword: '',
      terms: false
    }
  });

  const onSubmit = async (data: UserFormData) => {
    // Имитация отправки данных на сервер
    await new Promise(resolve => setTimeout(resolve, 1000));
    console.log('Отправленные данные:', data);
    
    // Сброс формы после успешной отправки
    reset();
    
    // Здесь можно показать сообщение об успешной отправке
    alert('Форма успешно отправлена!');
  };

  return (
    <div className={styles.formContainer}>
      <h2>Регистрация с Zod-валидацией</h2>
      
      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
        <div className={styles.formGroup}>
          <label htmlFor="username">Имя пользователя:</label>
          <input
            id="username"
            className={styles.input}
            {...register('username')}
          />
          {errors.username && (
            <p className={styles.errorText}>{errors.username.message}</p>
          )}
        </div>
        
        <div className={styles.formGroup}>
          <label htmlFor="email">Email:</label>
          <input
            id="email"
            className={styles.input}
            type="email"
            {...register('email')}
          />
          {errors.email && (
            <p className={styles.errorText}>{errors.email.message}</p>
          )}
        </div>
        
        <div className={styles.formGroup}>
          <label htmlFor="age">Возраст:</label>
          <input
            id="age"
            className={styles.input}
            type="number"
            {...register('age', { valueAsNumber: true })}
          />
          {errors.age && (
            <p className={styles.errorText}>{errors.age.message}</p>
          )}
        </div>
        
        <div className={styles.formGroup}>
          <label htmlFor="website">Веб-сайт (необязательно):</label>
          <input
            id="website"
            className={styles.input}
            type="url"
            {...register('website')}
          />
          {errors.website && (
            <p className={styles.errorText}>{errors.website.message}</p>
          )}
        </div>
        
        <div className={styles.formGroup}>
          <label htmlFor="password">Пароль:</label>
          <input
            id="password"
            className={styles.input}
            type="password"
            {...register('password')}
          />
          {errors.password && (
            <p className={styles.errorText}>{errors.password.message}</p>
          )}
        </div>
        
        <div className={styles.formGroup}>
          <label htmlFor="confirmPassword">Подтверждение пароля:</label>
          <input
            id="confirmPassword"
            className={styles.input}
            type="password"
            {...register('confirmPassword')}
          />
          {errors.confirmPassword && (
            <p className={styles.errorText}>{errors.confirmPassword.message}</p>
          )}
        </div>
        
        <div className={styles.checkboxGroup}>
          <input
            id="terms"
            type="checkbox"
            {...register('terms')}
          />
          <label htmlFor="terms">Я принимаю условия использования</label>
          {errors.terms && (
            <p className={styles.errorText}>{errors.terms.message}</p>
          )}
        </div>
        
        <button 
          type="submit" 
          className={styles.submitButton}
          disabled={isSubmitting}
        >
          {isSubmitting ? 'Отправка...' : 'Зарегистрироваться'}
        </button>
      </form>
    </div>
  );
};

// src/types/todo.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export type TodoFilter = 'all' | 'active' | 'completed';

// src/components/TodoApp/TodoApp.tsx
import { useState, useCallback } from 'react';
import { TodoList } from '../TodoList/TodoList';
import { TodoForm } from '../TodoForm/TodoForm';
import { TodoFilter } from '../TodoFilter/TodoFilter';
import { Todo, TodoFilter as FilterType } from '../../types/todo';
import styles from './TodoApp.module.css';

export const TodoApp = () => {
  // Состояние для хранения списка задач
  const [todos, setTodos] = useState<Todo[]>([
    { id: 1, text: 'Изучить React', completed: true },
    { id: 2, text: 'Изучить TypeScript', completed: false },
    { id: 3, text: 'Создать приложение', completed: false }
  ]);
  
  // Состояние для текущего фильтра
  const [filter, setFilter] = useState<FilterType>('all');
  
  // Функция для добавления новой задачи
  const addTodo = useCallback((text: string) => {
    setTodos(prevTodos => [
      ...prevTodos,
      {
        id: Date.now(),
        text,
        completed: false
      }
    ]);
  }, []);
  
  // Функция для переключения статуса задачи
  const toggleTodo = useCallback((id: number) => {
    setTodos(prevTodos =>
      prevTodos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }, []);
  
  // Функция для удаления задачи
  const deleteTodo = useCallback((id: number) => {
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== id));
  }, []);
  
  // Фильтрация задач в зависимости от выбранного фильтра
  const filteredTodos = todos.filter(todo => {
    if (filter === 'active') return !todo.completed;
    if (filter === 'completed') return todo.completed;
    return true; // 'all'
  });
  
  return (
    <div className={styles.todoApp}>
      <h1>Список задач</h1>
      
      <TodoForm onAddTodo={addTodo} />
      
      <TodoFilter 
        currentFilter={filter} 
        onFilterChange={setFilter} 
      />
      
      <TodoList 
        todos={filteredTodos} 
        onToggle={toggleTodo} 
        onDelete={deleteTodo} 
      />
      
      <div className={styles.stats}>
        <p>Всего задач: {todos.length}</p>
        <p>Выполнено: {todos.filter(todo => todo.completed).length}</p>
        <p>Осталось: {todos.filter(todo => !todo.completed).length}</p>
      </div>
    </div>
  );
};

// src/components/TodoList/TodoList.tsx
import { memo } from 'react';
import { TodoItem } from '../TodoItem/TodoItem';
import { Todo } from '../../types/todo';
import styles from './TodoList.module.css';

interface TodoListProps {
  todos: Todo[];
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

export const TodoList = memo(({ todos, onToggle, onDelete }: TodoListProps) => {
  if (todos.length === 0) {
    return <p className={styles.emptyMessage}>Нет задач для отображения</p>;
  }
  
  return (
    <ul className={styles.todoList}>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onToggle={onToggle} 
          onDelete={onDelete} 
        />
      ))}
    </ul>
  );
});

TodoList.displayName = 'TodoList';

// src/components/TodoItem/TodoItem.tsx
import { memo } from 'react';
import { Todo } from '../../types/todo';
import styles from './TodoItem.module.css';

interface TodoItemProps {
  todo: Todo;
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

export const TodoItem = memo(({ todo, onToggle, onDelete }: TodoItemProps) => {
  return (
    <li className={`${styles.todoItem} ${todo.completed ? styles.completed : ''}`}>
      <label className={styles.todoLabel}>
        <input
          type="checkbox"
          checked={todo.completed}
          onChange={() => onToggle(todo.id)}
          className={styles.todoCheckbox}
        />
        <span className={styles.todoText}>{todo.text}</span>
      </label>
      
      <button 
        onClick={() => onDelete(todo.id)} 
        className={styles.deleteButton}
        aria-label="Удалить задачу"
      >
        ✖
      </button>
    </li>
  );
});

TodoItem.displayName = 'TodoItem';

// src/components/TodoForm/TodoForm.tsx
import { useState, FormEvent, ChangeEvent, memo } from 'react';
import styles from './TodoForm.module.css';

interface TodoFormProps {
  onAddTodo: (text: string) => void;
}

export const TodoForm = memo(({ onAddTodo }: TodoFormProps) => {
  const [text, setText] = useState('');
  
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    if (text.trim()) {
      onAddTodo(text.trim());
      setText('');
    }
  };
  
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };
  
  return (
    <form onSubmit={handleSubmit} className={styles.todoForm}>
      <input
        type="text"
        value={text}
        onChange={handleChange}
        placeholder="Что нужно сделать?"
        className={styles.todoInput}
      />
      <button 
        type="submit" 
        className={styles.addButton}
        disabled={!text.trim()}
      >
        Добавить
      </button>
    </form>
  );
});

TodoForm.displayName = 'TodoForm';

// src/components/TodoFilter/TodoFilter.tsx
import { memo } from 'react';
import { TodoFilter as FilterType } from '../../types/todo';
import styles from './TodoFilter.module.css';

interface TodoFilterProps {
  currentFilter: FilterType;
  onFilterChange: (filter: FilterType) => void;
}

export const TodoFilter = memo(({ currentFilter, onFilterChange }: TodoFilterProps) => {
  return (
    <div className={styles.filterContainer}>
      <button
        className={`${styles.filterButton} ${currentFilter === 'all' ? styles.active : ''}`}
        onClick={() => onFilterChange('all')}
      >
        Все
      </button>
      <button
        className={`${styles.filterButton} ${currentFilter === 'active' ? styles.active : ''}`}
        onClick={() => onFilterChange('active')}
      >
        Активные
      </button>
      <button
        className={`${styles.filterButton} ${currentFilter === 'completed' ? styles.active : ''}`}
        onClick={() => onFilterChange('completed')}
      >
        Выполненные
      </button>
    </div>
  );
});

TodoFilter.displayName = 'TodoFilter';

// src/App.tsx
import { TodoApp } from './components/TodoApp/TodoApp';

function App() {
  return (
    <div className="App">
      <TodoApp />
    </div>
  );
}

export default App;