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

import { theme } from 'galio-framework';

var { height, width } = Dimensions.get('window');
const thumbMeasure = (width - 48 - 32) / 3;


export default StyleSheet.create({
  chevron: {
    position: 'absolute',
    left: 342,
    right: 20,
    marginTop: 20,
    width: 20,
    height: 20,
    transform: [{ rotate: '90deg'}],
  },
  reverseChevron: {
    position: 'absolute',
    left: 342,
    right: 20,
    marginTop: 20,
    width: 20,
    height: 20,
    transform: [{ rotate: '-90deg'}],
  },
  mainImage: {
    width: width * 1.1,
    height: 'auto',
  },
  mainImageContainer: {
    width: width,
    height: 260,
    marginBottom: 20,
  },
  circleImage:{
    height: 39,
    width:39,
    borderRadius:20,
    marginLeft: 6,
  },
  friendContainer: {
  },
  starRatingContainer: {
    position: 'relative',
    marginLeft: 25,
    marginRight: 13,
    marginBottom: 20,
  },
  starRatingPosition: {
    width: 50,
    height: 80,
  },
  profileDetails: {
    paddingTop: theme.SIZES.BASE * 4,
    justifyContent: 'flex-end',
    position: 'relative',
  },
  profileTexts: {
    paddingHorizontal: theme.SIZES.BASE * 2,
    paddingVertical: theme.SIZES.BASE * 2,
    zIndex: 2
  },
  locationText: {
    fontWeight: "bold",
    fontSize: 20
  },
  activityTitle: {
    fontWeight: "bold",
    fontSize: 35,
    color: '#353B50',
    lineHeight: 46
  },
  activityDescription: {
    fontSize: 14,
    color: '#353B50',
    marginLeft: 25,
    marginRight: 25,
    marginBottom: 20,
    marginTop: 10
  },
  miniHeader: {
    marginTop: 20,
    fontSize: 20,
    marginLeft: 25,
    color: '#353B50',
    marginBottom: 20,
  },
  priceText: {
    color: '#269EFD',
    fontSize: 23,
    marginTop: 4
  },
  pro: {
    paddingHorizontal: 6,
    marginRight: theme.SIZES.BASE / 2,
    borderRadius: 4,
    height: 19,
    width: 38,
  },
  tagContainer:{
    marginBottom: 20,
    marginLeft: 6,
    marginRight: 6,
    backgroundColor: "#5DA2D5", 
    justifyContent: "center",
    height: 40,
    width: 80,
    borderRadius: 10,
    },
  tagTextContainer: {
    textAlign: "center",
    fontSize: 14,
    overflow: "hidden", 
    color: "#FFFFFF",
  },
  takeMeContainer:{
    alignSelf: 'center',
    marginTop: 20,
    backgroundColor: "#F4828C", 
    justifyContent: "center",
    height: 60,
    width: 0.8*width,
    borderRadius: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3, 
    elevation: 2,
  },
  takeMeTextContainer: {
    textAlign: "center",
    fontSize: 24,
    overflow: "hidden", 
    color: "#FFFFFF",
  },
   prevButton: {
     borderWidth:0,
     alignItems:'center',
     position: 'absolute',
     left: 18,
     width:50,
     height:50,
     top:height*0.05,
     justifyContent: 'center',
     backgroundColor:'#F2F5F7',
     borderRadius:35,
     shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 3,
   },
  prevObject: {
    width: 40,
    height: 40,
    marginRight: 5
  },
  matchContainer:{
    marginTop: 10,
    marginLeft: 23,
    marginBottom: 6,
    backgroundColor: "#FFDF74", 
    justifyContent: "center",
    height: 90,
    width: 90,
    borderRadius: 500,
  },
  matchTextContainer: {
    textAlign: "center",
    fontSize: 20,
    overflow: "hidden", 
    color: "#3F6072",
    fontWeight:'bold'
  },
  moreFriendsContainer:{
    backgroundColor: "#3F6072", 
    justifyContent: "center",
    height: 39,
    width: 39,
    borderRadius: 20,
    marginRight: 10,
    marginLeft: 6
  },
  moreFriendsTextContainer: {
    textAlign: "center",
    fontSize: 17,
    overflow: "hidden", 
    color: "#FFFFFF",
  },
  titleTextContainer: {
    marginTop: 10,
    width: 0.6*width,
    marginLeft: 25
  },
  friendTextContainer: {
    width: 0.4*width
  },
  seller: {
    marginRight: theme.SIZES.BASE / 2,
  },
  options: {
    position: 'relative',
    padding: theme.SIZES.BASE,
    marginHorizontal: theme.SIZES.BASE,
    marginTop: -theme.SIZES.BASE * 7,
    borderTopLeftRadius: 13,
    borderTopRightRadius: 13,
    backgroundColor: theme.COLORS.WHITE,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0 },
    shadowRadius: 8,
    shadowOpacity: 0.2,
    zIndex: 2,
  },
  thumb: {
    borderRadius: 4,
    marginVertical: 4,
    alignSelf: 'center',
    width: thumbMeasure,
    height: thumbMeasure
  },
  gradient: {
    zIndex: 1,
    left: 0,
    right: 0,
    bottom: 0,
    height: '30%',
    position: 'absolute',
  },
  titleContainer : {
        flexDirection: 'row'
  },
  title       : {
      flex    : 1,
      padding : 10,
      color   :'#2a2f43',
      fontWeight:'bold'
  },
  button      : {

  },
  buttonImage : {
      width   : 30,
      height  : 25
  },
  body        : {
      padding     : 10,
      paddingTop  : 0
  },
  reviewText: {
    marginBottom: 10,
  },
  fullStar: {
    tintColor: '#F3D250',
    height: 20,
    width: 20,
  },
  emptyStar: {
    tintColor: '#F3D250',
    height: 20,
    width: 20,
  },
});
