import { SellingMethodEnum } from '@bit-ui-libs/common';
import { ReactNode } from 'react';
import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
import { Icon, Text } from '../../../components';
import { tw } from '../../../core/tailwind';
import { TokenSwipeActionEnum } from '../enums';

interface TokenCardSwipeActionsProps {
  actions?: TokenSwipeActionEnum[];
  onAction?: (action: TokenSwipeActionEnum) => void;
  sellingMethod?: SellingMethodEnum;
}

export function TokenCardSwipeActions({ actions, onAction, sellingMethod }: TokenCardSwipeActionsProps) {
  return (
    <View style={tw`my-2 items-stretch flex-row`}>
      {actions?.includes(TokenSwipeActionEnum.Sell) ? (
        <SwipeButton
          text="Sell Your Token"
          isDisable={sellingMethod !== null}
          style={tw`bg-primary`}
          onPress={() => onAction?.(TokenSwipeActionEnum.Sell)}
          icon={<Icon name={'lock-label'} size={27} color="#ffffff" />}
        />
      ) : null}
      {actions?.includes(TokenSwipeActionEnum.ShowAllBids) ? (
        <SwipeButton
          text="Show All Bids"
          style={tw`bg-[#F6851B]`}
          isDisable={sellingMethod?.includes(SellingMethodEnum.Auction) ? false : true}
          onPress={() => onAction?.(TokenSwipeActionEnum.ShowAllBids)}
          icon={<Icon name={'auction'} size={22} color="#ffffff" />}
        />
      ) : null}
      {actions?.includes(TokenSwipeActionEnum.Edit) ? (
        <SwipeButton
          text="Edit Marketplace"
          isDisable={sellingMethod?.includes(SellingMethodEnum.Fixed) ? false : true}
          style={tw`bg-primary`}
          onPress={() => onAction?.(TokenSwipeActionEnum.Edit)}
          icon={<Icon name={'lock-label'} size={27} color="#ffffff" />}
        />
      ) : null}
    </View>
  );
}

interface SwipeButtonProps {
  text: string;
  icon?: ReactNode;
  style?: StyleProp<ViewStyle>;
  color?: string;
  onPress?: () => void;
  isDisable?: boolean;
}

export function SwipeButton(props: SwipeButtonProps) {
  return (
    <TouchableOpacity
      disabled={props?.isDisable}
      style={[
        props.style,
        tw.style(`w-18 text-center h-full items-center justify-center ${props.isDisable && 'bg-gray-300'}`),
      ]}
      onPress={props.onPress}
    >
      {props?.icon && <View style={tw.style('py-2', { color: props.color })}>{props?.icon}</View>}
      <Text style={tw`text-xxs uppercase text-center`}>{props.text}</Text>
    </TouchableOpacity>
  );
}