import SwipePicker, {
  type ISwipePickerId,
  type ISwipePickerItem,
} from "@ilz5753/react-native-swipe-picker";

//

const itemHeight = 90;

interface Account extends ISwipePickerId {
  fullName: string;
  address: string;
  uri: string;
}

const JennieNichols: Account = {
  id: "0",
  fullName: "Jennie Nichols",
  address: "Valwood Pkwy",
  uri: "https://randomuser.me/api/portraits/women/1.jpg",
};

const accounts: Account[] = [JennieNichols];

function RenderAccount({ item, itemHeight }: ISwipePickerItem<Account>) {
  let imgSize = useMemo(() => itemHeight * 0.75, [itemHeight]);
  return (
    <View
      style={[
        styles.fdr,
        styles.aic,
        styles.jcsb,
        styles.ph8,
        { height: itemHeight },
      ]}
    >
      <View style={[styles.fdr, styles.aic, styles.gap8]}>
        <Image
          style={[
            { width: imgSize, height: imgSize, borderRadius: imgSize / 2 },
          ]}
          source={{ uri: item.uri }}
        />
        <View style={[styles.gap8]}>
          <Text>{item.fullName}</Text>
          <Text>{item.address}</Text>
        </View>
      </View>
    </View>
  );
}

export default function Example() {
  const [activeAccount, setActiveAccount] = useState(JennieNichols);
  let onSelectItem = useCallback((acc: Account) => setActiveAccount(acc), []);
  return (
    <View style={[styles.f1, styles.aic, styles.jcc, styles.gap8]}>
      <SwipePicker
        {...{
          items: accounts,
          renderItem: RenderAccount,
          itemHeight,
          onSelectItem,
        }}
      />
      {activeAccount && (
        <Animated.View
          entering={FadeInUp}
          exiting={FadeOutUp}
          layout={LinearTransition}
        >
          <RenderAccount
            {...{
              item: activeAccount,
              itemHeight,
              index: 0,
            }}
          />
        </Animated.View>
      )}
    </View>
  );
}