import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
} from 'react-native';

import { theme } from 'galio-framework';
const { height, width } = Dimensions.get('screen');
const thumbMeasure = (width - 48 - 32) / 3;

export default  StyleSheet.create({
  components: {
  },
  textContainer: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    //paddingVertical: theme.SIZES.BASE,
   // paddingHorizontal: theme.SIZES.BASE * 2,
    fontWeight:'bold',
    color: "#3F6072",
    fontSize: 28,
  },
  greyTitle: {
    //paddingVertical: theme.SIZES.BASE,
   // paddingHorizontal: theme.SIZES.BASE * 2,
    fontWeight:'bold',
    color: 'rgba(0, 0, 0, 0.5)',
    fontSize: 28,
  },
  group: {
    paddingTop: theme.SIZES.BASE * 3.75,
  },
  shadow: {
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 4,
    shadowOpacity: 0.2,
    elevation: 2,
  },
  button: {
    marginBottom: theme.SIZES.BASE,
    width: width - (theme.SIZES.BASE * 2),
  },
  optionsText: {
    fontSize: theme.SIZES.BASE * 0.75,
    color: '#4A4A4A',
    fontWeight: "normal",
    fontStyle: "normal",
    letterSpacing: -0.29,
  },
  optionsButton: {
    width: 'auto',
    height: 34,
    paddingHorizontal: theme.SIZES.BASE,
    paddingVertical: 10,
  },
  input: {
    borderBottomWidth: 1,
  },
  hiddenButton: {
    width:50,
    height:50,
  },
  settingButton: {
     borderWidth:0,
     alignItems:'center',
  //   position: 'absolute',
   //  left: width*0.8,
     width:36,
     height:36,
    // top:height*0.08,
     justifyContent: 'center',
     backgroundColor:'#F2F5F7',
     borderRadius:35,
     shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
   },
   greySettingButton: {
     borderWidth:0,
     alignItems:'center',
  //   position: 'absolute',
   //  left: width*0.8,
     width:36,
     height:36,
    // top:height*0.08,
     justifyContent: 'center',
     backgroundColor:'rgba(0, 0, 0, 0.5)',
     borderRadius:35,
     shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
   },
  settingObject: {
    width: 24,
    height: 24,
    //marginRight: 5,
    opacity: .8,
  },
  globeContainer: {
    marginLeft: 30,
  },
  globePosition: {
    width: 59,
    height: 59,
  },
 /* inputDefault: {
    borderBottomColor: materialTheme.COLORS.PLACEHOLDER,
  },
  inputTheme: {
    borderBottomColor: materialTheme.COLORS.PRIMARY,
  },
  inputTheme: {
    borderBottomColor: materialTheme.COLORS.PRIMARY,
  },
  inputInfo: {
    borderBottomColor: materialTheme.COLORS.INFO,
  },
  inputSuccess: {
    borderBottomColor: materialTheme.COLORS.SUCCESS,
  },
  inputWarning: {
    borderBottomColor: materialTheme.COLORS.WARNING,
  },
  inputDanger: {
    borderBottomColor: materialTheme.COLORS.ERROR,
  },*/
  imageBlock: {
    overflow: 'hidden',
    borderRadius: 4,
  },
  rows: {
    height: theme.SIZES.BASE * 2,
  },
  social: {
    width: theme.SIZES.BASE * 3.5,
    height: theme.SIZES.BASE * 3.5,
    borderRadius: theme.SIZES.BASE * 1.75,
    justifyContent: 'center',
  },
  category: {
    backgroundColor: theme.COLORS.WHITE,
    marginVertical: theme.SIZES.BASE / 2,
    borderWidth: 0,
  },
  categoryTitle: {
    height: '100%',
    paddingHorizontal: theme.SIZES.BASE,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  albumThumb: {
    borderRadius: 4,
    marginVertical: 4,
    alignSelf: 'center',
    width: thumbMeasure,
    height: thumbMeasure
  },
    chatBotContainer:{
    backgroundColor: "#F2F5F7", 
    justifyContent: "center",
    height: 60,
    width: Dimensions.get('window').width - 120,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
    alignItems: 'center',
    },
  greyChatBotContainer:{
    backgroundColor: 'rgba(0, 0, 0, 0.5)', 
    justifyContent: "center",
    height: 60,
    width: Dimensions.get('window').width - 120,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
    alignItems: 'center',
    },
  chatBotTextContainer: {
    marginLeft: 10,
    marginRight: 10,
    textAlign: "left",
    fontSize: 18,
    overflow: "hidden", 
    color: "#3F6072",
  },
  greyChatBotTextContainer: {
    marginLeft: 10,
    marginRight: 10,
    textAlign: "left",
    fontSize: 18,
    overflow: "hidden", 
    color: 'rgba(0, 0, 0, 0.5)',
  },
  startChattingContainer:{
    marginLeft: 'auto',
    marginRight: 15,
    marginTop: -10,
    marginBottom: 10,
    backgroundColor: "#ECCD52", 
    justifyContent: "center",
    height: 40,
    width: 120,
    borderRadius: 20,
  },
  startChattingTextContainer: {
    marginLeft: 2,
    marginRight: 2,
    textAlign: "center",
    fontSize: 14,
    overflow: "hidden", 
    color: "#3F6072",
  },
  backgroundModal: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  },
  modalText: {
    marginTop: 34.5,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 24.5,
    textAlign: 'center',
    fontWeight: "bold",
    fontSize: 30
  },
  modalExit: {
     borderWidth:0,
     alignItems:'center',
     width:32,
     height:32,
     position: 'absolute',
     top: 8,
     right: 8,
     justifyContent: 'center',
     borderRadius:35,
     backgroundColor:'#ffffff'
  },
  modalExitText: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  modalBody: {
    marginLeft: 37,
    marginRight: 14,
    textAlign: 'left',
    fontSize: 22
  },
  modalContainer: {
    position: 'absolute', 
    top: 160,
    left: width / 2 - ((width * .9) / 2),
    width: width * .9,
    height: 448,
    borderRadius: 10,
    backgroundColor: "#fede7b"
   },
  circleImage:{
    height: 30,
    width:30,
    borderRadius:15
  },
  friendContainer: {
    marginTop: -54,
    marginLeft: 5,
    marginBottom: 2,
  },
  moreFriendsContainer:{
  marginTop: -54,
  marginLeft: 5,
  backgroundColor: "#3F6072", 
  justifyContent: "center",
  height: 30,
  width: 30,
  borderRadius: 500,
},
greyMoreFriendsContainer:{
  marginTop: -54,
  marginLeft: 5,
  backgroundColor: 'rgba(0, 0, 0, 0.5)', 
  justifyContent: "center",
  height: 30,
  width: 30,
  borderRadius: 500,
},
  moreFriendsTextContainer: {
    textAlign: "center",
    fontSize: 14,
    overflow: "hidden", 
    color: "#FFFFFF",
  },
  greyMoreFriendsTextContainer: {
    textAlign: "center",
    fontSize: 14,
    overflow: "hidden", 
    color: 'rgba(0, 0, 0, 0.5)',
  },
  questionContainer:{
    marginRight: 15,
    marginTop: -54,
    backgroundColor: "#F2F5F7", 
    justifyContent: "center",
    height: 30,
    width: 30,
    borderWidth: 3,
    borderRadius: 500,
    borderColor: '#3F6072',
  },
  greyQuestionContainer:{
    marginRight: 15,
    marginTop: -54,
    backgroundColor: 'rgba(0, 0, 0, 0.5)', 
    justifyContent: "center",
    height: 30,
    width: 30,
    borderWidth: 3,
    borderRadius: 500,
    borderColor: 'rgba(0, 0, 0, 0.5)',
  },
  questionTextContainer: {
    textAlign: "center",
    fontSize: 14,
    overflow: "hidden", 
    color: "#3F6072",
  },
  greyQuestionTextContainer: {
    textAlign: "center",
    fontSize: 14,
    overflow: "hidden", 
    color: 'rgba(0, 0, 0, 0.5)',
  },
});
