import { Dimensions, Animated } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { RFValue } from 'react-native-responsive-fontsize';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import styled from 'styled-components/native';
import { Pressable } from '../Pressable';
import { RSValue } from '../RFValue';
import { TextNative } from '../TextNative';

export const Container = styled.View`
   flex: 1;
   justify-content: flex-end;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: 100;
`;

export const Opacity = styled(Animated.View)`
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   z-index: 1;
   background: black;
`;

export const PanGesture = styled(Animated.View)`
   flex: 1;
   z-index: 2;
   justify-content: flex-end;
`;

export const CalendarHeader = styled.View`
   flex-direction: row;
   padding-bottom: ${RSValue(20)}px;
`;

export const CalendarHeaderBtn = styled(Pressable)`
   width: ${RSValue(40)}px;
   align-content: center;
   align-items: center;
`;

export const CalendarContainer = styled.View`
   justify-content: flex-start;
   background: white;
   border-top-left-radius: ${RSValue(20)}px;
   border-top-right-radius: ${RSValue(20)}px;
   position: relative;
   overflow: hidden;
`;

export const CalendarContainerInner = styled(ScrollView)`
   padding: ${RSValue(10)}px;
   padding-top: ${RSValue(45)}px;
   padding-bottom: ${RSValue(70)}px;
`;

export const CalendarMonth = styled.View`
   padding-bottom: ${RSValue(10)}px;
`;

export const BarTopScrollContainer = styled.View`
   top: 0px;
   left: 0px;
   position: absolute;
   z-index: 10;
   width: 100%;
   background: white;
`;

export const BarTopScroll = styled.View`
   align-self: center;
   width: ${RSValue(120)}px;
   height: ${RSValue(5)}px;
   background: #eee;
   margin-top: ${RSValue(10)}px;
   margin-bottom: ${RSValue(15)}px;
`;

export const BtnMonth = styled(FontAwesomeIcon).attrs({
   size: 26,
})`
   flex-direction: row;
   align-self: center;
`;

export const TextMonth = styled(TextNative)`
   padding-left: 10px;
   font-size: ${RFValue(16)}px;
   font-weight: bold;
`;

export const TextYear = styled(TextNative)`
   flex: 1;
   align-self: center;
   text-align: center;
   font-size: ${RFValue(16)}px;
   font-weight: bold;
   flex-direction: row;
`;

export const Week = styled.View`
   flex-direction: row;
   justify-content: center;
`;

export const WeekName = styled(TextNative).attrs({
   bold: true,
})`
   flex: 1;
   text-align: center;
   padding-bottom: ${RSValue(10)}px;
   color: black;
   font-weight: bold;
   font-size: ${RFValue(13)}px;
`;

// 3d83ff

export const DayContainer = styled(Pressable)<any>`
   flex: 1;
   text-align: center;
   align-self: center;
   justify-content: center;
   position: relative;
   border-width: 1px;
   border-color: transparent;
   height: ${RSValue(40)}px;
`;

export const Day = styled.View<any>`
   text-align: center;
   align-self: center;
   justify-content: center;
   position: relative;
   width: ${RSValue(40)}px;
   height: ${RSValue(40)}px;
   border-radius: 1000px;
   border-width: 1px;
   border-color: transparent;
   ${(props) => props.today && `background: #e1e0e5;`}
   ${(props) => props.selected && `background: ${props.theme.primary}; border-color: transparent;`}
`;

export const TextDay = styled(TextNative).attrs({
   bold: true,
})`
    text-align: center;
    align-self: center;
    line-height: ${RFValue(15.5)}px;
    font-size: ${RFValue(13)}px;
    font-weight: bold;
    ${(props) => props.lastMonth && `color: #bbb;`}
    ${(props) => props.nextMonth && `color: #bbb;`}
    ${(props) => props.selected && `color: white;`}
`;

export const TimePicker = styled.View<any>`
   flex-direction: row;
   align-content: center;
   align-items: center;
   padding-bottom: ${RSValue(15)}px;
`;

export const HourContainer = styled.View<any>`
   flex: 1;
   flex-direction: row;
   align-items: center;
`;

export const MinutesContainer = styled.View<any>`
   flex: 1;
   flex-direction: row;
   align-items: center;
`;

export const Time = styled(TextNative).attrs({})`
   font-size: ${RFValue(28)}px;
   text-align: center;
   width: ${RSValue(50)}px;
`;

export const TimePickerDivision = styled(TextNative).attrs({
   bold: true,
})`
   font-size: ${RFValue(24)}px;
   color: #b7bfc8;
   text-align: center;
`;

export const BtnMinus = styled(Pressable).attrs({})`
   flex: 1;
   align-items: flex-end;
   padding: 0px ${RSValue(15)}px;
`;

export const BtnBlack = styled(Pressable).attrs({})`
   background: black;
   border-radius: 3px;
   width: ${RSValue(20)}px;
   height: ${RSValue(20)}px;
   align-items: center;
   justify-content: center;
`;

export const BtnPlus = styled(Pressable).attrs({})`
   flex: 1;
   align-items: flex-start;
   padding: 0px ${RSValue(15)}px;
`;

export const AllDayContainer = styled.View<any>`
   flex-direction: row;
   align-items: center;
   padding-bottom: ${RSValue(10)}px;
`;

export const AllDayText = styled(TextNative)<any>`
   font-size: ${RFValue(18)}px;
`;

export const CalendarTitle = styled(TextNative)<any>`
   font-size: ${RFValue(16)}px;
   color: #b7bfc8;
   padding-bottom: ${RSValue(15)}px;
   padding-left: ${RSValue(10)}px;
`;

export const BtnApply = styled.View<any>`
   position: absolute;
   bottom: 0px;
   padding: ${RSValue(10)}px;
   width: 100%;
   background: white;
`;

export const HourFast = styled(Pressable)<any>`
   padding: ${RSValue(5)}px;
   border-width: 1px;
   border-color: ${(props) => props.theme.primary};
   border-radius: ${RSValue(10)}px;
   margin-bottom: ${RSValue(10)}px;
   margin-right: ${RSValue(5)}px;
   margin-left: ${RSValue(5)}px;
   width: ${RSValue(70)}px;
   ${(props) => props.selected && `background: ${props.theme.primary}`}
`;

export const HourFastText = styled(TextNative)<any>`
   font-size: ${RFValue(16)}px;
   color: ${(props) => props.theme.primary};
   align-self: center;
   ${(props) => props.selected && `color: white`}
`;
