/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */
import { StyleProp, ViewStyle, TextStyle, Platform, ImageStyle } from 'react-native';

const React = require("react-native");
const { Dimensions } = React;
const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width;
const HEADER_MAX_HEIGHT = deviceHeight / 2.2;
type BottonTabsStyle = {
  flexClass: StyleProp<ViewStyle>
  menuWhite: any,
  scroll: StyleProp<ViewStyle>
  rating: StyleProp<ViewStyle>
  parentSeasonCard: StyleProp<ViewStyle>
  episodeView: StyleProp<ViewStyle>
  listItem: StyleProp<ViewStyle>
  episodeWatched: StyleProp<ViewStyle>
  episodeDetailView: StyleProp<ViewStyle>
  episodeNameView: StyleProp<ViewStyle>
  episodeMore: StyleProp<ViewStyle>
  scrollViewContent: StyleProp<ViewStyle>
  header: StyleProp<ViewStyle>
  seasonCard: StyleProp<ViewStyle>
  cardImage: StyleProp<ViewStyle>
  cardFoot: StyleProp<ViewStyle>
  cardEpisode: StyleProp<ViewStyle>
  seasonsParentView: StyleProp<ViewStyle>
  seasonsChildView: StyleProp<ViewStyle>
  fill: StyleProp<ViewStyle>
  button: StyleProp<ViewStyle>
  ratings: StyleProp<ViewStyle>
  rate: StyleProp<ViewStyle>
  comment: StyleProp<ViewStyle>
  show: StyleProp<ViewStyle>
  description: StyleProp<ViewStyle>
  headerView: StyleProp<ViewStyle>
  headerBeginView: StyleProp<ViewStyle>
  headerEndView: StyleProp<ViewStyle>
  backgroundImage: StyleProp<ViewStyle>
  cardImageText: StyleProp<TextStyle>
  rateText: StyleProp<TextStyle>
  trailerText: StyleProp<TextStyle>
  showName: StyleProp<TextStyle>
  episodeTitle: StyleProp<TextStyle>
  showGenre: StyleProp<TextStyle>
  episodesRemaining: StyleProp<TextStyle>
  image: StyleProp<ImageStyle>
  buttonAlign: any
  play: any
  trailer: any
  remaining: any
  background: any
  bar: any
  headerIcon: any
  episodeIcon: any
  headerText: any
  icon: any
  container: any
  detailImage: any
  trailerEpisode: any
  seasons: any
  episodeCardItem: any,
  episodeList: any,
  loader: any,
  content: any,
  title: any,
  row: any
}

const styles: BottonTabsStyle = {
  menuWhite: { color: 'white' },
  flexClass: { flex: 1, flexDirection: 'row' },
  container: {
    backgroundColor: "#FFF"
  },
  scrollViewContent: {
    paddingTop: Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0,
    marginTop: 25
  },
  header: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: "#f53d3d",
    overflow: "hidden",
    height: HEADER_MAX_HEIGHT
  },
  background: {
    color: "#f53d3d",
    fontSize: 20
  },
  image: {
    width: deviceWidth,
    height: deviceHeight / 3,
    marginBottom: 1.5
  },
  detailImage: {
    width: deviceWidth,
    height: deviceHeight / 2.2
  },
  button: {
    height: deviceHeight / 11,
    width: deviceHeight / 11,
    backgroundColor: "white",
  },
  buttonAlign: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    left: (deviceWidth / 6) * 4.5,
    top: deviceHeight / 5
  },
  play: {
    fontSize: 35,
    left: deviceHeight / 90,
    color: "#f53d3d"
  },
  trailer: {
    height: deviceHeight / 13,
    width: deviceWidth,
    backgroundColor: "#f53d3d",
    flex: 0.2,
    shadowColor: "black",
    shadowRadius: 2,
    shadowOffset: { height: 10, width: 10 }
  },
  trailerEpisode: {
    height: deviceHeight / 13,
    width: deviceWidth,
    backgroundColor: "#f53d3d",
    flex: 0.05,
    shadowColor: "black",
    shadowRadius: 2,
    shadowOffset: { height: 10, width: 10 }
  },
  trailerText: {
    color: "white",
    fontSize: 20,
    top: deviceHeight / 55,
    left: deviceWidth / 25
  },
  remaining: {
    height: deviceHeight / 6,
    width: deviceWidth,
    backgroundColor: "white",
    flex: 0.5,
    zIndex: 5,
    paddingLeft: deviceWidth / 40,
    paddingRight: deviceWidth / 40,

    elevation: 50
  },

  ratings: {
    flex: 0.25,
    flexDirection: "row",
    backgroundColor: "white",
    alignItems: "center"
  },
  rating: {
    flex: 0.3,
    flexDirection: "row",
    justifyContent: "space-evenly",
    backgroundColor: "white",
  },
  rate: {
    flex: 0.4
  },
  rateText: {
    fontSize: 15
  },
  comment: {
    flex: 0.15,
    flexDirection: "row",
    justifyContent: "space-between"
  },

  show: {
    flex: 0.3,
    flexDirection: "row",
    alignItems: "center"
  },
  showName: {
    fontWeight: "bold",
    fontSize: 20
  },
  showGenre: {
    left: 10,
    fontStyle: "italic",
    fontSize: 17
  },
  description: {
    flex: 0.5,
    flexDirection: "row",
    justifyContent: "center"
  },
  seasons: {
    flex: 0.5,
    backgroundColor: "red",
  },
  parentSeasonCard: {
  },
  seasonCard: {
    width: deviceWidth / 2.25,
    height: deviceHeight / 3.1,
    backgroundColor: "white",
    marginLeft: deviceWidth / 60,
    marginRight: deviceWidth / 60,
    marginTop: deviceHeight / 100,
    marginBottom: deviceHeight / 70,
    alignItems: "center",
    padding: 0

  },
  cardImage: {
    width: deviceWidth / 2.25,
    height: (deviceHeight / 3.1) - 30
  },
  cardImageText: {
    color: "white",
    fontSize: 17,
    fontWeight: "bold",
    top: deviceHeight / 4.3,
    left: deviceWidth / 25
  },
  scroll: {
    flexDirection: "row",
    backgroundColor: "white",
    flexWrap: "wrap",
    justifyContent: "space-evenly"
  },
  episodeCardItem: {
    paddingTop: deviceHeight / 180
  },
  cardFoot: {
    flex: 1,
    flexDirection: "row",
    minHeight: 30
  },

  cardEpisode: {
    flex: 0.8,
    justifyContent: "center",
    alignItems: "flex-start"
  },

  episodesRemaining: {
    fontSize: 13,
    left: deviceWidth / 25
  },
  seasonsParentView: {
    flex: 0.2
  },
  seasonsChildView: {
    flex: 0.3,
    justifyContent: "center",
    alignItems: "flex-start"
  },

  listItem: {
    marginBottom: 0,
    paddingBottom: 0,
    bottom: 0
  },
  episodeView: {
    flex: 1,
    flexDirection: "row",
    height: deviceHeight / 15
  },

  episodeWatched: {
    flex: 0.01,
    height: deviceHeight / 15,
    backgroundColor: "orange"
  },

  episodeDetailView: { flex: 0.9 },

  episodeNameView: {
    flex: 0.5,
    flexDirection: "row",
    alignItems: "center",
  },

  episodeTitle: {
    fontSize: 12,
    fontWeight: "bold"
  },
  episodeList: {
    marginBottom: deviceHeight / 10
  },

  episodeIcon: { fontSize: 15 },

  episodeMore: { flex: 0.05 },

  loader: {
    height: 100,
    top: deviceHeight / 2.5,
    zIndex: 1000,
    position: "absolute"
  },

  headerView: {
    flex: 1,
    flexDirection: "row",
    alignItems: "flex-end",
    minHeight: 64,
    paddingBottom: 10
  },

  headerBeginView: {
    flex: 0.8,
    flexDirection: "row",

  },

  headerIcon: {
    color: "white",
    fontSize: 18,
    marginTop: Platform.OS !== 'ios' ? 15 : 10
  },

  headerEndView: {
    flex: 0.2,
    flexDirection: "row",
    justifyContent: "space-evenly"
  },

  headerText: {
    fontSize: 18,
    fontWeight: "bold",
    color: "white",
    marginTop: Platform.OS !== 'ios' ? 15 : 10
  },

  fill: {
    flex: 1
  },
  content: {
    flex: 1
  },

  icon: {
    fontSize: 13
  },


  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: HEADER_MAX_HEIGHT * (9 / 10),
  },
  bar: {
    backgroundColor: 'transparent',
    marginTop: Platform.OS === 'ios' ? 28 : 38,
    height: 32,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
  title: {
    color: 'white',
    fontSize: 18,
  },

  row: {
    height: 40,
    margin: 16,
    backgroundColor: '#D3D3D3',
    alignItems: 'center',
    justifyContent: 'center',
  },
};
export default styles;