import { StyleSheet } from "react-native";

const TEXT_COLOR = "#EFEFEF";
const BORDER_COLOR = "#EFEFEF4D";
const SELECTED_COLOR = "#fc461b";
const SHADOW_COLOR = "#fc461b";

export const container = {
  marginTop: 439,
  marginBottom: 60,
  marginHorizontal: 90,
  paddingHorizontal: 22,
};

export const barContainer = { flexDirection: "row" };

export const programInfo = StyleSheet.create({
  container: {
    width: 1696,
    height: 226,
    alignItems: "flex-start",
    justifyContent: "center",
    paddingHorizontal: 22,
  },
  logo: {
    width: 96,
    height: 72,
  },
  title: {
    height: 90,
    paddingVertical: 10,
  },
  titleText: {
    fontSize: 48,
    fontWeight: "bold",
    fontStyle: "normal",
    color: TEXT_COLOR,
    textShadowColor: SHADOW_COLOR,
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 5,
  },
  subtitle: {
    marginTop: 10,
  },
  subtitleText: {
    fontSize: 24,
    fontWeight: "normal",
    fontStyle: "normal",
    color: TEXT_COLOR,
  },
});

const baseButton = {
  borderWidth: 1,
  borderColor: BORDER_COLOR,
  alignItems: "center",
  justifyContent: "center",
};

const button = {
  ...baseButton,
  width: 60,
  height: 60,
  borderRadius: 30,
};

const bigButton = {
  ...baseButton,
  width: 80,
  height: 80,
  marginHorizontal: 40,
  borderRadius: 40,
};

export const transportControls = {
  container: {
    width: 280,
    height: 80,
    marginHorizontal: 708,
    marginTop: 140,
    marginBottom: 60,
    flexDirection: "row",
    alignItems: "center",
  },
  big: {
    button: bigButton,
    selected: {
      ...bigButton,
      borderColor: SELECTED_COLOR,
      backgroundColor: SELECTED_COLOR,
    },
    image: {
      width: 40,
      height: 40,
    },
  },
  normal: {
    button,
    selected: {
      ...button,
      borderColor: SELECTED_COLOR,
      backgroundColor: SELECTED_COLOR,
    },
    image: {
      width: 34,
      height: 34,
    },
  },
};

export const backButton = transportControls.normal;

export const progressBar = StyleSheet.create({
  container: {
    width: 1696,
    height: 60,
    marginLeft: 33,
    flexDirection: "row",
    alignItems: "center",
  },
});

export const timer = StyleSheet.create({
  container: {
    marginLeft: 30,
    marginRight: 30,
    width: 47,
    height: 40,
    justifyContent: "center",
  },
  text: {
    fontSize: 16,
    fontWeight: "normal",
    fontStyle: "normal",
    color: TEXT_COLOR,
  },
});

export const progressIndicator = StyleSheet.create({
  container: {
    width: 1296,
    height: 40,
    justifyContent: "center",
  },
  background: {
    width: 1296,
    height: 8,
    borderRadius: 4,
    backgroundColor: BORDER_COLOR,
  },
  foreground: {
    width: 600,
    height: 8,
    borderRadius: 4,
    backgroundColor: SELECTED_COLOR,
  },
});

export const discoveryHandle = StyleSheet.create({
  container: {
    paddingTop: 15,
    marginHorizontal: 743,
    width: 211,
    height: 60,
    alignItems: "center",
    justifyContent: "center",
  },
  textContainer: {
    width: 211,
    height: 30,
  },
  text: {
    fontSize: 18,
    fontWeight: "normal",
    fontStyle: "normal",
    color: TEXT_COLOR,
    textAlign: "center",
  },
  icon: {
    width: 30,
    height: 30,
  },
});