import React from 'react';
import { ActivityIndicator, StyleSheet, Text } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { ph, pv, SIZE, WEIGHT } from '../../common/common';
import { useTracked } from '../../provider';
import { PressableButton } from '../PressableButton';

export const Button = ({
  height = 40,
  width = '48%',
  onPress = () => {},
  loading = false,
  grayed,
  title = '',
  icon,
  color = 'accent',
  key
}) => {
  const [state, dispatch] = useTracked();
  const {colors, tags, premiumUser} = state;
  const usedColor = 'accent' ? colors.accent : color;

  return (
    <PressableButton
      onPress={onPress}
      key={key}
      color={grayed ? colors.nav : usedColor}
      selectedColor={grayed ? colors.nav : usedColor}
      alpha={grayed ? (!colors.night ? -0.04 : 0.04) : -0.1}
      customStyle={{
        height: height,
        width: width? width : null,
        paddingVertical: pv,
        paddingHorizontal: ph,
        borderRadius: 5,
        alignSelf: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
      }}>
      {loading ? <ActivityIndicator color={usedColor} /> : null}
      {icon && !loading ? (
        <Icon
          name={icon}
          style={{
            marginRight: 5,
          }}
          color={grayed ? colors.icon : 'white'}
          size={SIZE.lg}
        />
      ) : null}
      <Text
        style={[styles.buttonText, {color: grayed ? colors.icon : 'white'}]}>
        {title}
      </Text>
    </PressableButton>
  );
};

const styles = StyleSheet.create({
  activityText: {
    fontSize: SIZE.sm,
    textAlign: 'center',
  },
  activityContainer: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontFamily: WEIGHT.medium,
    color: 'white',
    fontSize: SIZE.sm,
    marginLeft: 5,
  },
});