import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import CompensateRegisterView from './view';

const CompensateRegister = props => {
    const initFormData ={
   numberOfPeriods: '',
    makeUpDay: '',
    note: '',
  }
  const [isShow, setShowSchedule] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [formData, setFormData] = useState(initFormData);

  const handleSave = async ()=>{
    //1. Validate ở đây
    //2. 
    try {
      //Gọi api ở đây
      console.log('Lưu thành công:',formData);
      setFormData({...initFormData});
    } catch (error) {
      console.log('Xảy ra lỗi',error);
    }finally{
      setIsSaving(false);
    }
  }

  const onChange = key => value => {
  setFormData(prev => ({ ...prev, [key]: value }));
};



  const [scheduleData, setScheduleData] = useState([
    {
      date: 'Thứ 2\n28/07/2025',
      periods: [
        {
          period: 1,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 2,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 3,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 4,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 5,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 6,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 7,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 8,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 9,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 10,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 11,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 12,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 13,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 14,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 15,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
      ],
    },
    {
      date: 'Thứ 3\n29/07/2025',
      periods: [
        {
          period: 1,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 2,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 3,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 4,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 5,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 6,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 7,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 8,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 9,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 10,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 11,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 12,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 13,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 14,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 15,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
      ],
    },
    {
      date: 'Thứ 4\n30/07/2025',
      periods: [
        {
          period: 1,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 2,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 3,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 4,
          percent: '3%',
          totalSession: '24',
          breakTime: '1',
          available: false,
        },
        {
          period: 5,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 6,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 7,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 8,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 9,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 10,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 11,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 12,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 13,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 14,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 15,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
      ],
    },
    {
      date: 'Thứ 5\n31/07/2025',
      periods: [
        {
          period: 1,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 2,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 3,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 4,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 5,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 6,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 7,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 8,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 9,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 10,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 11,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 12,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 13,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 14,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 15,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
      ],
    },
    {
      date: 'Thứ 6\n01/08/2025',
      periods: [
        {
          period: 1,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 2,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 3,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 4,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 5,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 6,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 7,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 8,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 9,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 10,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 11,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 12,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 13,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 14,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 15,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
      ],
    },
    {
      date: 'Thứ 7\n02/08/2025',
      periods: [
        {
          period: 1,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 2,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 3,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 4,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 5,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 6,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 7,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 8,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 9,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 10,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 11,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 12,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 13,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 14,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
        {
          period: 15,
          percent: '100%',
          totalSession: '24',
          breakTime: '24',
          available: false,
        },
      ],
    },
  ]);

  const handleCheckboxChange = (dayIndex, periodIndex, newValue) => {
    setScheduleData(prevData => {
      const updatedData = [...prevData];
      updatedData[dayIndex].periods[periodIndex].available = newValue;
      return updatedData;
    });
  };

  const handleToggle = () => {
    setShowSchedule(prev => !prev);
  };

  return (
    <CompensateRegisterView
      isShow={isShow}
      isSaving={isSaving}
      formData={formData}
      handleToggle={handleToggle}
      setShowSchedule={setShowSchedule}
      scheduleData={scheduleData}
      onCheckboxChange={handleCheckboxChange}
      onSave={handleSave}
      onChange={onChange}
    />
  );
};

export default CompensateRegister;
