import * as React from "react";
import { View, StyleSheet, Text, TouchableOpacity } from "react-native";
import { Plan } from "../../types/plan";

interface Props {
  plans: Plan[];
  onPlanPressed: (plan: Plan) => () => void;
}

const COLORS = ["orange", "green", "blue"];

interface State {}

export default class PlanComponent extends React.PureComponent<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {};
  }

  public render(): React.ReactNode {
    return (
      <View style={styles.wrapper}>
        <View style={styles.planWrapper}>
          {this.props.plans.map((plan, index) => {
            return (
              <TouchableOpacity
                activeOpacity={1}
                onPress={this.props.onPlanPressed(plan)}
                key={plan.sku}
                style={[styles.container, { backgroundColor: COLORS[index] }]}
              >
                <Text
                  style={{ fontSize: 16, fontWeight: "600", color: "white" }}
                >
                  {plan.name}
                </Text>

                <Text
                  style={{
                    fontSize: 14,
                    marginTop: 2,
                    color: "white",
                  }}
                >
                  {plan.description}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  recommendWrapper: {
    position: "absolute",
    top: -10,
    backgroundColor: "rgb(255, 148, 27)",
    paddingHorizontal: 13,
    height: 20,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
  },
  container: {
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 8,
    marginHorizontal: 8,
    paddingVertical: 5,
    marginBottom: 5,
  },
  planWrapper: {
    marginTop: 15,
    marginHorizontal: 20,
  },
  titleStyle: {
    fontSize: 18,
    marginBottom: 8,
    fontWeight: "600",
    textTransform: "uppercase",
  },
  wrapper: {
    width: "100%",
  },
});