import React from 'react';
import { Box, Text } from 'ink';
import { colors } from '../../../theme.js';
import type { WizardStepProps } from '../types.js';

type Props = Pick<
  WizardStepProps,
  'template' | 'actionIdentifier' | 'roleIdentifier' | 'actionName'
>;

export function InfoStep({
  template,
  actionIdentifier,
  roleIdentifier,
  actionName,
}: Props): React.ReactElement {
  const action = template?.actions?.[actionIdentifier];
  const role = action?.roles?.[roleIdentifier];

  return (
    <Box flexDirection='column'>
      <Text color={colors.primary} bold>
        Action: {actionName}
      </Text>
      <Text color={colors.textMuted}>
        {action?.description || 'No description'}
      </Text>

      <Box marginTop={1}>
        <Text color={colors.text}>Your Role: </Text>
        <Text color={colors.accent}>{roleIdentifier}</Text>
      </Box>

      {role?.requirements && (
        <Box marginTop={1} flexDirection='column'>
          <Text color={colors.text}>Requirements:</Text>
          {role.requirements.variables?.map((v) => (
            <Text key={v} color={colors.textMuted}>
              {'  '}• Variable: {v}
            </Text>
          ))}
          {role.requirements.slots && (
            <Text color={colors.textMuted}>
              {'  '}• Slots: {role.requirements.slots.min} min (UTXO selection
              required)
            </Text>
          )}
        </Box>
      )}
    </Box>
  );
}