import React from 'react';

export function DatepickerFullscreen() {}
// import React, {
//    createRef,
//    useCallback,
//    useContext,
//    useEffect,
//    useImperativeHandle,
//    useMemo,
//    useRef,
//    useState,
// } from 'react';
// import {
//    Animated,
//    BackHandler,
//    CompositeAnimation,
//    Dimensions,
//    FlatList,
//    Modal,
//    ScrollView,
//    Switch,
//    View,
// } from 'react-native';
// import {
//    LongPressGestureHandler,
//    PanGestureHandler,
//    PanGestureHandlerStateChangeEvent,
//    State,
// } from 'react-native-gesture-handler';
// import { RFValue } from 'react-native-responsive-fontsize';
// import { faAngleLeft, faAngleRight, faArrowLeft, faCheck, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
// import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
// import * as dateFns from 'date-fns';
// import { useImmer } from 'use-immer';
// import { Calendar, IMonthCalendar, IDayCalendar } from '../../services/calendar.service';
// import { getDateValue } from '../Datepicker/datepicker.interface';
// import { Pressable } from '../Pressable';
// import { RSValue } from '../RFValue';
// import { TextNative } from '../TextNative';
// import { transformerValue } from './DatepickerFullscreen.interface';
// import {
//    CalendarMonth,
//    Week,
//    WeekName,
//    Container,
//    DayContainer,
//    Day,
//    TextDay,
//    BtnMonth,
//    CalendarHeader,
//    CalendarHeaderBtn,
//    TextMonth,
//    TextYear,
// } from './DatepickerFullscreen.style';
// import { TimeDayPicker } from './Timerpicker';
//
// interface IPropsAutoComplete extends React.ComponentProps<any> {
//    renderInput: (params: any) => any;
//    renderItemSelected?: (params: any) => any;
//    name: any;
//    fetch: any;
//    multiSelection: boolean;
//    show?: boolean;
//    onSelect?: (i: any) => void;
//    cleanAfterSelect?: boolean;
//    initialSelect?: any[];
//    initialValue?: any[];
// }
//
// type IItemsDatepickerGlobal = any;
//
// export function DatepickerFullscreen(props, ref): any {
//    // Data do calendário
//    const [calendarDate, setCalendarDate] = useImmer(new Date());
//
//    return (
//       <>
//          <TimeDayPicker />
//       </>
//    );
// }
//
// function TimeDayPicker3() {
//    const offset = useRef(new Animated.Value(0)).current;
//    const offsetOpacity = useRef(new Animated.Value(0)).current;
//
//    const headerHeight = useRef(Animated.diffClamp(offset, 0, 60)).current;
//
//    const [items, setItems] = useState(Array.from({ length: 60 }, (v, k) => k));
//    const scrollRef: any = useRef();
//
//    const size = 30;
//
//    const posTimer = useRef(Array.from({ length: 60 }, (v, k) => new Animated.Value(0))).current;
//    const posTimer2 = useRef(Array.from({ length: 60 }, (v, k) => createRef())).current;
//    const posTimer3 = useRef(Array.from({ length: 60 }, (v, k) => createRef())).current;
//
//    const translateY = useRef(new Animated.Value(0)).current;
//    const initial = useRef(new Animated.Value(0)).current;
//    const initial2 = useRef(new Animated.Value(0)).current;
//    const translate2 = useRef(Animated.add(Animated.add(translateY, initial), initial2)).current;
//    const animation = useRef<CompositeAnimation>();
//
//    const offset2 = useRef(0);
//    const offset2_decay = useRef(0);
//
//    function updateOffsetNumbers() {
//       // offset2_decay.current = value;
//       const scrollPos = offset2_decay.current + offset2.current + size * 20;
//
//       posTimer2.forEach((n, i) => {
//          const x = Math.floor((scrollPos + i * size) / (60 * size));
//          posTimer[i].setValue(x * (60 * size));
//       });
//    }
//
//    useState(() => {
//       initial2.addListener(({ value }) => {
//          offset2_decay.current = value;
//          if (offset2_decay.current + offset2.current >= 0) {
//             offsetOpacity.setValue(size * 60 - Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//          } else {
//             offsetOpacity.setValue(Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//          }
//          updateOffsetNumbers();
//       });
//
//       translateY.addListener(({ value }) => {
//          if (offset2_decay.current + offset2.current >= 0) {
//             offsetOpacity.setValue(
//                size * 60 - Math.abs((offset2_decay.current + value + offset2.current) % (size * 60)),
//             );
//          } else {
//             offsetOpacity.setValue(Math.abs((offset2_decay.current + value + offset2.current) % (size * 60)));
//          }
//          updateOffsetNumbers();
//       });
//    });
//
//    const animatedEvent = useRef(
//       Animated.event(
//          [
//             {
//                nativeEvent: {
//                   translationY: translateY,
//                },
//             },
//          ],
//          {
//             useNativeDriver: true,
//          },
//       ),
//    ).current;
//
//    const onHandlerStateChange = (event: PanGestureHandlerStateChangeEvent): void => {
//       const { translationY, velocityY, y } = event.nativeEvent;
//
//       if (event.nativeEvent.oldState === State.UNDETERMINED) {
//          animation.current?.stop();
//       }
//
//       offset2.current += translationY;
//
//       if (event.nativeEvent.oldState === State.ACTIVE) {
//          translateY.setValue(0);
//          initial.setValue(offset2.current);
//
//          if (Math.abs(velocityY / 1500) > 0.15) {
//             animation.current = Animated.decay(initial2, {
//                velocity: velocityY / 1500,
//                deceleration: 0.99,
//                useNativeDriver: true,
//             });
//
//             animation.current.start((v) => {
//                const x = Math.abs(((offset2_decay.current + offset2.current) % (size * 60)) % size);
//
//                if (x > 25) {
//                   offset2.current += x - size;
//                } else {
//                   offset2.current += x;
//                }
//                // initial.setValue(offset2.current);
//                Animated.timing(initial, {
//                   toValue: offset2.current,
//                   duration: 100,
//                   useNativeDriver: true,
//                }).start();
//
//                if (offset2_decay.current + offset2.current >= 0) {
//                   offsetOpacity.setValue(size * 60 - Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//                } else {
//                   offsetOpacity.setValue(Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//                }
//
//                // console.log(((offset2_decay.current + offset2.current) % (size * 60)) % size);
//                // console.log('sdds');
//             });
//          } else {
//             const x = Math.abs(((offset2_decay.current + offset2.current) % (size * 60)) % size);
//
//             if (x > 25) {
//                offset2.current += x - size;
//             } else {
//                offset2.current += x;
//             }
//             // initial.setValue(offset2.current);
//             Animated.timing(initial, {
//                toValue: offset2.current,
//                duration: 100,
//                useNativeDriver: true,
//             }).start();
//
//             if (offset2_decay.current + offset2.current >= 0) {
//                offsetOpacity.setValue(size * 60 - Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//             } else {
//                offsetOpacity.setValue(Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//             }
//          }
//       }
//
//       if (offset2_decay.current + offset2.current >= 0) {
//          offsetOpacity.setValue(size * 60 - Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//       } else {
//          offsetOpacity.setValue(Math.abs((offset2_decay.current + offset2.current) % (size * 60)));
//       }
//    };
//
//    return (
//       <>
//          <PanGestureHandler maxPointers={1} onGestureEvent={animatedEvent} onHandlerStateChange={onHandlerStateChange}>
//             <Animated.View
//                style={{
//                   height: size * 3,
//                   backgroundColor: 'red',
//                }}
//             >
//                {items.map((m, i) => {
//                   const A1 = (i - 1) * size - size / 1.2;
//                   const A2 = (i - 1) * size;
//                   const A3 = (i - 1) * size + size / 1.2;
//
//                   if (i < 3) {
//                      console.log(A1, A2, A3);
//                   }
//
//                   return (
//                      <Animated.View
//                         key={i}
//                         style={{
//                            flexDirection: 'row',
//                            alignItems: 'center',
//                            justifyContent: 'center',
//                            height: size,
//                            opacity: offsetOpacity.interpolate({
//                               inputRange: [A1, A2, A3],
//                               outputRange: [0.2, 1, 0.2],
//                               extrapolate: 'clamp',
//                            }),
//                            transform: [
//                               {
//                                  translateY: Animated.subtract(translate2, posTimer[i]),
//                               },
//                               {
//                                  scale: offsetOpacity.interpolate({
//                                     inputRange: [A1, A2, A3],
//                                     outputRange: [0.6, 1.1, 0.6],
//                                     extrapolate: 'clamp',
//                                  }),
//                               },
//                            ],
//                         }}
//                      >
//                         <TextNative size={20} style={{ justifyContent: 'center' }}>
//                            {m}
//                         </TextNative>
//                      </Animated.View>
//                   );
//                })}
//             </Animated.View>
//          </PanGestureHandler>
//       </>
//    );
// }
//
// function TimeDayPicker2() {
//    const panGestureHandlertranslateY = useRef(new Animated.Value(0)).current;
//    const posRelativeNumber = useRef(Array.from({ length: 60 }, (v, k) => new Animated.Value(0))).current;
//    const size = 30;
//    const offsetOpacity = useRef(new Animated.Value(0)).current;
//    const [items, setItems] = useState(Array.from({ length: 60 }, (v, k) => k));
//
//    const scrollOffsetY = useRef(new Animated.Value(0)).current;
//    const animationDecay = useRef(new Animated.Value(0)).current;
//    const animationScrollY = useRef(
//       Animated.add(Animated.add(panGestureHandlertranslateY, scrollOffsetY), animationDecay),
//    ).current;
//    const animation = useRef<CompositeAnimation>();
//
//    const scrollY = useRef(0);
//    const scrollYDecay = useRef(0);
//
//    function updateOffsetNumbers(): void {
//       const scrollPos = scrollYDecay.current + scrollY.current + size * 20;
//       posRelativeNumber.forEach((n, i) => {
//          const x = Math.floor((scrollPos + i * size) / (60 * size));
//          posRelativeNumber[i].setValue(x * (60 * size));
//       });
//    }
//
//    function setPosCorrect() {
//       const x = Math.abs(((scrollYDecay.current + scrollY.current) % (size * 60)) % size);
//
//       // console.log(scrollY.current + scrollYDecay.current, x);
//
//       if (scrollYDecay.current + scrollY.current > 0) {
//          if (scrollY.current > size / 3) {
//             scrollY.current -= x;
//          } else {
//             scrollY.current += size - x;
//          }
//       } else if (scrollY.current > size / 3) {
//          scrollY.current -= size - x;
//       } else {
//          scrollY.current += x;
//       }
//
//       console.log(x);
//
//       // console.log(scrollYDecay.current + scrollY.current);
//
//       // console.log(scrollY.current + scrollYDecay.current, x);
//
//       Animated.timing(scrollOffsetY, {
//          toValue: scrollY.current,
//          duration: 100,
//          useNativeDriver: true,
//       }).start();
//    }
//
//    function updateRelativePos(addValue = 0) {
//       if (scrollYDecay.current + scrollY.current >= 0) {
//          offsetOpacity.setValue(
//             size * 60 - Math.abs((scrollYDecay.current + addValue + scrollY.current) % (size * 60)),
//          );
//       } else {
//          offsetOpacity.setValue(Math.abs((scrollYDecay.current + addValue + scrollY.current) % (size * 60)));
//       }
//    }
//
//    useEffect(() => {
//       animationDecay.addListener(({ value }) => {
//          // console.log(Math.abs(value - scrollYDecay.current));
//          if (Math.abs(value - scrollYDecay.current) < 1) {
//             animation.current?.stop();
//             if (value > 0) {
//                setPosCorrect();
//             } else {
//                setPosCorrect();
//             }
//          }
//
//          scrollYDecay.current = value;
//          updateRelativePos();
//          updateOffsetNumbers();
//       });
//
//       panGestureHandlertranslateY.addListener(({ value }) => {
//          updateRelativePos(value);
//          updateOffsetNumbers();
//       });
//    }, []);
//
//    const animatedEvent = useRef(
//       Animated.event(
//          [
//             {
//                nativeEvent: {
//                   translationY: panGestureHandlertranslateY,
//                },
//             },
//          ],
//          {
//             useNativeDriver: true,
//          },
//       ),
//    ).current;
//
//    const onHandlerStateChange = (event: PanGestureHandlerStateChangeEvent): void => {
//       const { translationY, velocityY, y } = event.nativeEvent;
//
//       if (event.nativeEvent.oldState === State.UNDETERMINED) {
//          animation.current?.stop();
//       }
//
//       scrollY.current += translationY;
//
//       if (event.nativeEvent.oldState === State.ACTIVE) {
//          panGestureHandlertranslateY.setValue(0);
//          scrollOffsetY.setValue(scrollY.current);
//
//          if (Math.abs(velocityY / 1500) > 0.15) {
//             animation.current = Animated.decay(animationDecay, {
//                velocity: velocityY / 1500,
//                deceleration: 0.99,
//                useNativeDriver: true,
//             });
//
//             animation.current.start();
//          } else {
//             updateRelativePos();
//             setPosCorrect();
//          }
//       }
//
//       updateRelativePos();
//    };
//
//    return (
//       <>
//          <PanGestureHandler maxPointers={1} onGestureEvent={animatedEvent} onHandlerStateChange={onHandlerStateChange}>
//             <Animated.View
//                style={{
//                   marginTop: 80,
//                   overflow: 'hidden',
//                   height: size * 3,
//                }}
//             >
//                {items.map((m, i) => {
//                   const A1 = (i - 1) * size - size * 0.6;
//                   const B1 = (i - 1) * size - size * 0.3;
//                   const A2 = (i - 1) * size;
//                   const B2 = (i - 1) * size + size * 0.3;
//                   const A3 = (i - 1) * size + size * 0.6;
//
//                   return (
//                      <Animated.View
//                         key={i}
//                         style={{
//                            flexDirection: 'row',
//                            alignItems: 'center',
//                            justifyContent: 'center',
//                            height: size,
//                            opacity: offsetOpacity.interpolate({
//                               inputRange: [A1, B1, A2, B2, A3],
//                               outputRange: [0.2, 0.9, 1, 0.9, 0.2],
//                               extrapolate: 'clamp',
//                            }),
//                            transform: [
//                               {
//                                  translateY: Animated.subtract(animationScrollY, posRelativeNumber[i]),
//                               },
//                               {
//                                  scale: offsetOpacity.interpolate({
//                                     inputRange: [A1, B1, A2, B2, A3],
//                                     outputRange: [0.6, 1.0, 1.1, 1.0, 0.6],
//                                     extrapolate: 'clamp',
//                                  }),
//                               },
//                            ],
//                         }}
//                      >
//                         <TextNative size={20} style={{ justifyContent: 'center' }}>
//                            {m}
//                         </TextNative>
//                      </Animated.View>
//                   );
//                })}
//             </Animated.View>
//          </PanGestureHandler>
//       </>
//    );
// }
//
// const DatepickerCalendar: any = React.memo(function DatepickerCalendar({ date }: any) {
//    const monthName = Calendar.monthsName[dateFns.getMonth(date)];
//    const calendarYear = dateFns.getYear(date);
//    const weekNames = useMemo(() => Calendar.weeksName, []);
//    const month = useMemo(() => Calendar.getMonth(dateFns.getMonth(date), dateFns.getYear(date)), [date]);
//
//    return (
//       <>
//          <TimeDayPicker />
//          <CalendarHeader>
//             <TextMonth testID="calendar-month">
//                {monthName}, <TextYear>{calendarYear}</TextYear>
//             </TextMonth>
//             <CalendarHeaderBtn testID="datepicker-previous-month">
//                <BtnMonth icon={faAngleLeft} />
//             </CalendarHeaderBtn>
//             <CalendarHeaderBtn testID="datepicker-next-month">
//                <BtnMonth icon={faAngleRight} />
//             </CalendarHeaderBtn>
//          </CalendarHeader>
//
//          <CalendarMonth>
//             <Week>
//                {weekNames.map((nameWeek, index) => (
//                   <WeekName key={`${nameWeek + index}`}>{nameWeek}</WeekName>
//                ))}
//             </Week>
//
//             {month.map((week, weekI) => (
//                <Week key={`weeek-${weekI}`}>
//                   {week.map((day) => {
//                      return <DatepickerCalendarDay key={day.date} selected={false} day={day} selectDay={() => {}} />;
//                   })}
//                </Week>
//             ))}
//          </CalendarMonth>
//       </>
//    );
// });
//
// const DatepickerCalendarDay: any = React.memo(function DatepickerCalendarDay({ day, selectDay, selected }: any) {
//    console.log(`day: ${day.day}`);
//
//    return (
//       <DayContainer testID={day.date} onPress={() => selectDay(day)}>
//          <Day today={day.today} selected={selected}>
//             <TextDay today={day.today} lastMonth={day.lastMonth} nextMonth={day.nextMonth} selected={selected}>
//                {day.day}
//             </TextDay>
//          </Day>
//       </DayContainer>
//    );
// });
//
// const TimepickerContainer: any = React.memo(function TimepickerContainer({
//    allDay,
//    toggleSwitch,
//    setHour,
//    hour,
//    setMinutes,
//    minutes,
//    fastHours,
//    setTime,
// }: any) {
//    const minusHour = (): any => setHour(onChangeHour(Number(hour) - 1));
//    const plusHour = (): any => setHour(onChangeHour(Number(hour) + 1));
//    const minusMinutes = (): any => setMinutes(onChangeMinutes(Number(minutes) - 1));
//    const plusMinutes = (): any => setMinutes(onChangeMinutes(Number(minutes) + 1));
//
//    function onChangeHour(_hour: number): any {
//       if (Number(_hour) > 23) return 0;
//       if (Number(_hour) < 0) return 23;
//       return _hour;
//    }
//
//    function onChangeMinutes(_minutes: number): any {
//       if (Number(_minutes) > 59) return 0;
//       if (Number(_minutes) < 0) return 59;
//       return _minutes;
//    }
//
//    return (
//       <>
//          <AllDayContainer>
//             <Switch
//                trackColor={{ false: '#eee', true: '#57b3fd' }}
//                thumbColor={allDay ? '#36A3F7' : '#ddd'}
//                ios_backgroundColor="#3e3e3e"
//                onValueChange={toggleSwitch}
//                value={allDay}
//             />
//             <Pressable onPress={toggleSwitch}>
//                <AllDayText>Dia todo</AllDayText>
//             </Pressable>
//          </AllDayContainer>
//
//          <TimePicker>
//             <HourContainer>
//                <BtnMinus>
//                   <BtnBlack onPress={minusHour} testID="datepicker-minus-hour">
//                      <FontAwesomeIcon icon={faMinus} size={RFValue(14)} color="white" />
//                   </BtnBlack>
//                </BtnMinus>
//                <Time testID="datepicker-hour">{hour}</Time>
//                <BtnPlus>
//                   <BtnBlack onPress={plusHour} testID="datepicker-plus-hour">
//                      <FontAwesomeIcon icon={faPlus} size={RFValue(14)} color="white" />
//                   </BtnBlack>
//                </BtnPlus>
//             </HourContainer>
//             <TimePickerDivision>:</TimePickerDivision>
//             <MinutesContainer>
//                <BtnMinus>
//                   <BtnBlack onPress={minusMinutes} testID="datepicker-minus-minutes">
//                      <FontAwesomeIcon icon={faMinus} size={RFValue(14)} color="white" />
//                   </BtnBlack>
//                </BtnMinus>
//                <Time testID="datepicker-minutes">{minutes}</Time>
//                <BtnPlus>
//                   <BtnBlack onPress={plusMinutes} testID="datepicker-plus-minutes">
//                      <FontAwesomeIcon icon={faPlus} size={RFValue(14)} color="white" />
//                   </BtnBlack>
//                </BtnPlus>
//             </MinutesContainer>
//          </TimePicker>
//
//          <TimepickerFastHours hours={fastHours} setTime={setTime} />
//       </>
//    );
// });
//
// const TimepickerFastHours: any = React.memo(function TimepickerFastHours({ hours, setTime }: any) {
//    const flatListRef = useRef<any>();
//
//    const scrollToItem = useCallback((index) => {
//       flatListRef.current.scrollToIndex({
//          animated: true,
//          index,
//          viewOffset: Dimensions.get('window').width / 2 - RSValue(60 - 10),
//       });
//    }, []);
//
//    return (
//       <FlatList
//          ref={flatListRef}
//          horizontal
//          showsHorizontalScrollIndicator={false}
//          data={hours}
//          snapToAlignment="center"
//          snapToInterval={Dimensions.get('window').width / 5}
//          keyExtractor={(item: any) => `hour${item.hour}${item.minutes}`}
//          renderItem={(item) => (
//             <FastHoursItem
//                item={item}
//                onPress={() => {
//                   scrollToItem(item.index);
//                   setTime(item.item);
//                }}
//                setTime={setTime}
//             />
//          )}
//       />
//    );
// });
//
// const FastHoursItem: any = React.memo(function FastHoursItem({ item, selected, onPress }: any) {
//    return (
//       <HourFast onPress={onPress} selected={selected}>
//          <HourFastText selected={selected}>
//             {item.item.hour}:{item.item.minutes}
//          </HourFastText>
//       </HourFast>
//    );
// });
