import { Platform, StyleSheet } from 'react-native';
import { GlobalTheme, Screen } from '../../../theme';


export const styles = StyleSheet.create({
    container: {
        flex: 1,
        // backgroundColor: GlobalTheme.colors.white,
        paddingHorizontal: 10,
        // justifyContent:'center'
    },
    logoContainer: {
        alignItems: 'center',
    },
    appLogo: {
        height: 200,
        width: 200,
        resizeMode: 'contain',
    },
    appMaskLogo: {
        resizeMode: 'stretch',
        width: Screen.screenHeight * 0.9,
        height: Screen.screenHeight * 0.33,
    },
    titleContainer: {
        alignSelf: 'center',
        // marginTop: 15,
    },
    titleText: {
        fontSize: 25,
        fontWeight: 'bold',
        color: GlobalTheme.colors.black,
    },
    subtitleText: {
        fontSize: 15,
        color: '#1F2128',
        marginBottom: 14,
        fontWeight: '600',
        alignSelf: 'center',
        width: '80%',
        textAlign: 'center',
    },
    subtitleHighlight: {
        color: '#2381E9',
    },
    headerStyle: {
        height: '8%',
        backgroundColor: '#113F8C',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 15
    },
    headerText: {
        color: GlobalTheme.colors.white,
        fontSize: GlobalTheme.typography.fontSize.medium,
        fontWeight: '600'
    },
    headerDotBtn: {
        backgroundColor: '#295398',
        flexDirection: 'row',
        paddingHorizontal: 5,
        alignItems: 'center',
        borderRadius: 10
    },
    selectCard: {
        backgroundColor: '#FFFFFF',
        borderRadius: 30,
        elevation: 7,
        padding: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 15,
        marginHorizontal: 15,
        borderWidth: 1.5,
        borderColor: '#C9DAFF'
    },
    iconStyle: {
        height: 25,
        width: 25,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        margin: 15,
    },
    dropdown: {
        flex: 1,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 8,
        paddingHorizontal: 10,
        marginHorizontal: 4,
        height: 45,
    },
    row: {
        margin: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    inputStyle: {
        paddingHorizontal: 7,
        width: '100%',
        color: '#000'
        // backgroundColor:'red'
    },
    searchBox: {
        height: 45,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 10,
        marginTop: 10,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10
    },
    storeNameText: {
        color: '#000',
        fontWeight: '500',
        fontSize: 16
    },
    storeCard: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#DFDFDF',
        marginTop: 10,
        padding: 10,
        paddingHorizontal: 12,
        borderRadius: 20,
        // elevation: 2
    },
    cardTextBold: {
        fontSize: 16,
        color: '#000',
        fontWeight: '500',
        flexWrap: 'wrap',
        width: '72%'
    },
    cardText: {
        marginTop: 2,
        fontSize: 14,
        color: '#494949',
        fontWeight: '400'
    },
    dropHeaderText: {
        width: '33%',
        color: '#000',
        fontWeight: '400',
        fontSize: 14
    },
    selectStoreText: {
        fontSize: 15,
        color: '#808CA3',
        fontWeight: '400',
        alignSelf: 'center',
        marginTop: 5
    },
    storeText: {
        color: '#000',
        fontSize: 15,
        fontWeight: '500',
        marginLeft: 10
    },
    todayStoreText: {
        marginLeft: 10,
        color: '#2357C6',
        fontSize: 16,
        fontWeight: '500'
    },
    storeGredient: {
        flex: 1,
        padding: 10,
        marginTop: 15,
        borderTopLeftRadius: 25,
        borderTopRightRadius: 25
    },
    todayStoreCard: {
        flex: 1,
        // width:'95%',
        backgroundColor: '#fff',
        borderRadius: 25,
        paddingBottom: 10,
        marginRight: Platform.OS === 'ios' ? 20 : 0,
        // width:'100%'
    },

    mainContainer: {
        flex: 1,
    },
    selectedStoreText: {
        width: '75%',
        borderWidth: 1.5,
        borderColor: '#D8E3F1',
        borderRadius: 10,
        padding: 7,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    filterIcon: {
        backgroundColor: '#D8E3F1',
        padding: 3,
        borderRadius: 5
    },
    storeInfoText: {
        color: '#000',
        fontWeight: '500',
        fontSize: 16,
        textDecorationLine: 'underline'
    },
    percentBox: {
        width: '48%',
        height: 100,
        minHeight: 100,
        backgroundColor: '#EAF1FF',
        borderRadius: 20,
        elevation: 2,
        justifyContent: 'center',
        alignItems: 'center',
    },
    boxText: {
        color: '#000',
        fontWeight: '400',
        fontSize: 16
    },
    yearLable: {
        color: '#000',
        fontSize: 14,
        fontWeight: '500'
    },
    yearText: {
        color: '#7F83AB',
        fontSize: 14,
    },
    yearView: {
        borderWidth: 2,
        borderColor: '#D8E3F1',
        borderRadius: 15,
        paddingHorizontal: 10,
        padding: 5,
        width: '28%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    yearDropDown: {
        height: 40,
        borderWidth: 2,
        borderColor: '#D8E3F1',
        width: 100,
        borderRadius: 20
    },
    btnbg: {
        // marginLeft: 10,
        backgroundColor: GlobalTheme.colors.secondary,
        borderRadius: GlobalTheme.borderRadius.lgg,
        padding: 18,
        paddingVertical: 8
    },
    btntext: {
        color: GlobalTheme.colors.white,
        fontSize: GlobalTheme.typography.fontSize.xsmall,
        fontWeight: GlobalTheme.typography.fontWeight.medium
    },
    seperator: {
        marginTop: 10,
        borderBottomWidth: 2,
        borderColor: '#E4E4E4'
    },
    dropdownIcon: {
        height: 12,
        width: 12,
        resizeMode: 'contain',
        tintColor: 'gray'
    },
    mtdTab: {
        borderBottomWidth: 2,
        borderColor: '#113F8C',
        width: '50%',
        padding: 10,
        alignItems: 'center',
        // borderWidth:0.5,
    },
    mtdTabText: {
        fontSize: 15,
        color: '#000',
        fontWeight: '600'
    },
    subTabView: {
        backgroundColor: '#EAEAEA',
        paddingVertical: 10,
        paddingHorizontal: 5,
        flexDirection: 'row',
        alignItems: 'center'
    },
    subTab: {
        backgroundColor: '#113F8C',
        padding: 5,
        paddingHorizontal: 10,
        borderRadius: 10,
        marginRight: 10
    },
    tabText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: '400',
    },
    floatingBtn: {
        alignSelf: 'center',
        position: 'absolute',
        bottom: 10,
        backgroundColor: 'rgba(255, 255, 255, 0.4)',
        // backgroundColor:'#fff',
        padding: 10,
        paddingHorizontal: 20,
        borderRadius: 30,
        // elevation: 2,
        zIndex: 999,
        borderWidth: 1,
        borderColor: '#DFDFDF'
    },
    modalOverlay: {
        flex: 1,
        // backgroundColor: 'transparent',
        backgroundColor: 'rgba(87, 79, 79, 0.2)'
    },
    modalContainer: {
        position: 'absolute',
        top: Platform.OS === 'ios' ? 100 : 50,
        right: 10,
        width: '50%',
        backgroundColor: 'white',
        borderRadius: 8,
        elevation: 8,
        shadowColor: '#000',
        shadowOpacity: 0.2,
        shadowRadius: 5,
        shadowOffset: { width: 0, height: 2 },
    },
});