import moment from 'moment';
import React from 'react';
import {
  Image,
  Modal,
  Platform,
  SafeAreaView,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {Calendar} from 'react-native-calendars';
import FastImage from 'react-native-fast-image';
import Swiper from 'react-native-swiper';
import ButtonComponent from '../../components/ButtonComponent';
import colors from '../../values/colors';
import {IMAGES, IconProfile} from '../../values/images';
import styles from './style';

import {
  useAnimatedGestureHandler,
  useSharedValue,
} from 'react-native-reanimated';
import WishListComponent from './components/WishListComponent';
const HomeeScreen = ({
  userDetails,
  quotation,
  birthdayOfUser,
  openView,
  openModalHappyBirthday,
  closeModalHappyBirthday,
  openModalWishBirthday,
  closeModalWishBirthday,
  dataBirthday,
  OpenURLButton,
  bdUserCurrentMonth,
  handleOpenDesBirthday,
  modalVisible,
  handleCloseDesBirthday,
  addMoreImgFromGallery,
  onCalendarChangeMonth,
  SlidePersonnel,
  arrPersonnel,
  sendWishBirthday,
  wishTxt,
  wishList,
  setWishTxt,
  openProfileComponent,
  openCheckInPage,
  openCheckIn,
  chooseSetting,
  chooseSettingView,
  openSettingView,
}) => {
  const today = moment(moment()).format('YYYY-MM-DD'); // Today
  const translateY = useSharedValue(0);
  const panGestureEvent = useAnimatedGestureHandler({
    onStart: () => {},
    onActive: event => {
      translateY.value = event.translationY;
      console.log(event.translationY);
    },
    onEnd: () => {},
  });
  //console.log('HomeScreen', HomeScreen);

  return (
    <SafeAreaView style={styles.container}>
      {!openCheckIn && (
        <ScrollView
          style={{
            backgroundColor: openProfileComponent ? 'grey' : null,
          }}
          nestedScrollEnabled={true}>
          {/* <View style={{padding: 10}}>
          <StoryComponent />
        </View> */}
          <View>
            <View
              style={{
                padding: 10,
                position: 'absolute',
                top: 10,
                right: 5,
                zIndex: 100,
              }}>
              <ButtonComponent
                style={{position: 'absolute', top: 10, right: 10}}
                iconSource={IMAGES.IcMore}
                styleIcon={{width: 20, height: 20}}
                onPress={openSettingView}
              />
              {chooseSetting?.isVisible && (
                <ButtonComponent
                  style={{
                    backgroundColor: 'white',
                    padding: 10,
                    position: 'absolute',
                    top: 30,
                    right: 10,
                  }}
                  text={chooseSetting?.title}
                  onPress={chooseSettingView}
                />
              )}
            </View>
            {chooseSetting?.view && chooseSetting?.view}
          </View>
          {/*Calendar*/}
          <View style={styles.viewContent}>
            <Image source={IMAGES.BgBirthdayHeader} style={styles.BgBirthday} />
            {birthdayOfUser && (
              <Swiper
                style={styles.BgBirthday}
                showsButtons={false}
                loop={true}
                autoplay
                index={0}>
                {birthdayOfUser &&
                  birthdayOfUser.length > 0 &&
                  birthdayOfUser.map((item, index) => {
                    //console.log("index")
                    return (
                      <TouchableOpacity
                        onPress={() => {
                          const day = {
                            day: new Date().getDate(),
                            month: new Date().getMonth() + 1,
                            year: new Date().getFullYear(),
                          };
                          handleOpenDesBirthday(day);
                          //console.log(day)
                        }}
                        key={item.id}
                        style={{marginTop: 10}}>
                        <Text
                          style={{
                            fontSize: 13,
                            color: 'blue',
                            textAlign: 'center',
                          }}>
                          {`Hôm nay là sinh nhật ${item.first_name} ${item.middle_name} ${item.last_name} `}
                        </Text>
                        <Text
                          style={{
                            fontSize: 13,
                            color: 'blue',
                            textAlign: 'center',
                          }}>
                          hãy gửi lời chúc mừng nào
                        </Text>
                        <Text
                          style={{
                            fontSize: 13,
                            textAlign: 'center',
                          }}>
                          💖
                        </Text>
                      </TouchableOpacity>
                    );
                  })}
              </Swiper>
            )}
            <Calendar
              style={styles.calendarHolder}
              current={today}
              markedDates={bdUserCurrentMonth}
              markingType="dot"
              onDayPress={day => {
                handleOpenDesBirthday(day);
              }}
              onMonthChange={month => onCalendarChangeMonth(month)}
              enableSwipeMonths={false}
              theme={{
                //day section
                textDayFontSize: 13,
                textDayFontFamily:
                  Platform.OS === 'ios' ? 'System' : 'OpenSans',
                todayTextColor: colors.green,
                dayTextColor: colors.black,
                textDisabledColor: 'rgba(0, 0, 0, 0.25)',
                textDayFontWeight: '600',
                //month section
                textMonthFontSize: 18,
                textMonthFontFamily:
                  Platform.OS === 'ios' ? 'System' : 'Montserrat',
                monthTextColor: colors.black,
                textMonthFontWeight: 'bold',
                //header section
                textDayHeaderFontSize: 16,
                textDayHeaderFontFamily:
                  Platform.OS === 'ios' ? 'System' : 'OpenSans',
                textSectionTitleColor: 'rgba(0, 0, 0, 0.25)',
                textDayHeaderFontWeight: '300',
                //selected day section
                selectedDayBackgroundColor: '#dcf7fc',
                selectedDayTextColor: colors.black,
                //arrow section
                arrowColor: '#fa0000',

                //dot section
                selectedDotColor: '#dcf7fc',
              }}
            />
          </View>
          {/*wish */}

          {wishList.length > 0 && (
            <WishListComponent
              userDetails={userDetails}
              openView={openView}
              openModalHappyBirthday={openModalHappyBirthday}
              closeModalHappyBirthday={closeModalHappyBirthday}
              dataBirthday={wishList}
            />
          )}
          {/* deep link */}
          <View
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              marginBottom: 20,
            }}>
            <ButtonComponent
              text={'Bạn đã checkin chưa ?'}
              textStyle={{color: 'blue'}}
              // onPress={OpenURLButton}
              onPress={openCheckInPage}
            />
          </View>
          <Modal
            animationType="slide"
            transparent={true}
            visible={modalVisible?.isVisible}>
            <View
              style={{flex: 1, justifyContent: 'flex-end'}}
              //activeOpacity={0}
              //onPress={handleCloseDesBirthday}
            >
              <View style={styles.contentContainer}>
                <ScrollView>
                  <ButtonComponent
                    iconSource={IconProfile.IcCloseBlack}
                    styleIcon={{width: 20, height: 20}}
                    style={{
                      alignSelf: 'flex-end',
                      marginRight: 10,
                      marginTop: 10,
                    }}
                    onPress={handleCloseDesBirthday}
                  />
                  <Text
                    style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
                    {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`}
                  </Text>
                  {modalVisible?.birthdayArr &&
                    modalVisible?.birthdayArr?.map((item, index) => {
                      return (
                        <View
                          key={index}
                          style={[
                            styles.viewHappyBirthday,
                            modalVisible?.managerOpenWish[index].enable
                              ? styles.openViewHappyBirthday
                              : styles.closeViewHappyBirthday,
                          ]}>
                          <View
                            style={{
                              flexDirection: 'row',
                              justifyContent: 'space-between',
                            }}>
                            <View style={{flexDirection: 'row'}}>
                              <Image
                                source={{
                                  uri: 'https://meu.anawork.com' + item.avatar,
                                }}
                                style={{width: 40, height: 40}}
                              />
                              <View style={{paddingLeft: 10}}>
                                <Text
                                  style={
                                    styles.txtTitle
                                  }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</Text>
                                <Text>{item.position}</Text>
                              </View>
                            </View>
                            {!modalVisible?.managerOpenWish[index].enable && (
                              <View
                                style={{
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                }}>
                                {new Date(item.birthday).getDate() ===
                                  new Date().getDate() && (
                                  <TouchableOpacity
                                    onPress={() => openModalWishBirthday(index)}
                                    style={styles.btnOpenHappyBirthday}>
                                    <Text
                                      style={{
                                        color: 'blue',
                                        fontWeight: '500',
                                      }}>
                                      Gửi lời chúc
                                    </Text>
                                  </TouchableOpacity>
                                )}
                              </View>
                            )}
                          </View>
                          {modalVisible?.managerOpenWish[index].enable && (
                            <View>
                              <View style={{marginTop: 10}}>
                                <TextInput
                                  value={wishTxt}
                                  multiline
                                  numberOfLines={3}
                                  placeholder={'Vui lòng nhập lời chúc tại đây'}
                                  style={{borderWidth: 0.2}}
                                  onChangeText={setWishTxt}
                                />
                                {!wishTxt && (
                                  <Text style={{fontSize: 10, color: 'red'}}>
                                    Vui lòng nhập lời chúc
                                  </Text>
                                )}
                                {/** suggest wish  */}
                                <View>
                                  <ButtonComponent
                                    style={styles.btnSuggest}
                                    text={'Chúc bà sinh nhật dui dẻ nha bà 🌺'}
                                    textStyle={{color: 'white'}}
                                    onPress={() =>
                                      setWishTxt(
                                        'Chúc bà sinh nhật dui dẻ nha bà 🌺',
                                      )
                                    }
                                  />
                                  <ButtonComponent
                                    style={styles.btnSuggest}
                                    text={'Tuổi mới sinh đẹp nhaaaa bà 🌺💃'}
                                    onPress={() =>
                                      setWishTxt(
                                        'Tuổi mới sinh đẹp nhaaaa bà 🌺💃',
                                      )
                                    }
                                    textStyle={{color: 'white'}}
                                  />
                                </View>
                                <View style={{flexDirection: 'row'}}>
                                  {item?.imgArr &&
                                    item?.imgArr.length > 0 &&
                                    item?.imgArr.map((el, position) => {
                                      return (
                                        <View
                                          key={position}
                                          style={{marginRight: 10}}>
                                          <FastImage
                                            source={{
                                              uri: el?.uri,
                                            }}
                                            style={{
                                              width: 60,
                                              height: 60,
                                              marginTop: 10,
                                            }}
                                          />
                                        </View>
                                      );
                                    })}
                                  {!item.imgArr && (
                                    <View style={styles.viewAddMoreImg}>
                                      <ButtonComponent
                                        iconSource={IMAGES.IcAddMoreImg}
                                        styleIcon={{height: 25, width: 25}}
                                        onPress={() =>
                                          addMoreImgFromGallery(index)
                                        }
                                      />
                                    </View>
                                  )}
                                </View>
                              </View>
                              <View
                                style={{
                                  flexDirection: 'row',
                                  justifyContent: 'space-between',
                                  marginTop: 10,
                                }}>
                                <TouchableOpacity
                                  onPress={() => closeModalWishBirthday(index)}
                                  style={{alignSelf: 'flex-end'}}>
                                  <Text
                                    style={{color: 'blue', fontWeight: '600'}}>
                                    {' '}
                                    Hủy{' '}
                                  </Text>
                                </TouchableOpacity>
                                <TouchableOpacity
                                  onPress={() => sendWishBirthday(item, index)}
                                  style={{alignSelf: 'flex-end'}}>
                                  <Text
                                    style={{color: 'blue', fontWeight: '600'}}>
                                    Gửi
                                  </Text>
                                </TouchableOpacity>
                              </View>
                            </View>
                          )}
                        </View>
                      );
                    })}
                </ScrollView>
              </View>
            </View>
          </Modal>
        </ScrollView>
      )}
      {openProfileComponent && openProfileComponent}
      {openCheckIn && openCheckIn}
    </SafeAreaView>
    // <CheckInPage />
  );
};

export default HomeeScreen;
