const Documents = ({ userId }) => {
  const [
    { documents },
    { create, update, destroy }
  ] = useDocuments({ userId });

  return (
    <ItemList
      items={documents}
      onCreate={() => create({ documentData: {} })}
      onUpdate={data => update({ documentData: data })}
      onDelete={document => destroy(document.id)}
    />
  );
};

const ItemList = ({ items, onCreate, onUpdate, onDelete }) => {
  return (
    <>
      {items.map(item => {
        <div key={item.id}>
          <Item
            name={item.name}
            onChange={data => onUpdate(data)}
          />
          <button onClick={() => onDelete(item)}>X</button>
        </div>;
      })}
      <AddButton onClick={() => onCreate()} />
    </>
  );
};

const PaymentsLayout = ({ children }) => {
  const nodes = React.Children.toArray(children);
  return (
    <Grid padded>
      <Grid.Row columns="2">
        <Grid.Column>{nodes[0]}</Grid.Column>
        <Grid.Column>{nodes[1]}</Grid.Column>
      </Grid.Row>
      <Grid.Row>
        <Grid.Column>{children.slice(3)}</Grid.Column>
      </Grid.Row>
    </Grid>
  );
};

const Payments = ({ loan }) => (
  <PaymentsLayout>
    <NextPaymentsTable loan={loan} />
    <>
      <NumberOfPaymentsTable loan={loan} />
      <PartialPaymentTable loan={loan} />
    </>
    <PastDueTable loan={loan} />
  </PaymentsLayout>
);

const AlarmClock = ({ title, state, onSnooze, onDismiss }) => (
  <>
    <h3>{title}</h3>
    <div className="display">{state}</div>
    <button className="snooze" onClick={onSnooze}>
      Snooze
    </button>
    <button className="dismiss" onClick={onDismiss}>
      Dismiss
    </button>
  </>
);

export const CreditCardForm = () => {
  const [{ values, errors, status } = {}, dispatch] = useStore(CreditCardStore);

  return (
    <FormComponent
      values={values}
      errors={errors}
      status={status}
      onSubmit={e => {
        e.preventDefault();
        dispatch(PAY);
      }}
      onChange={e => dispatch(UPDATE, { [e.target.name]: e.target.value })}
      onBlur={e => e.target.name && dispatch(TOUCH, e.target.name)}
    />
  );
};

const createStore = (action$, creditCardService) => {
  const values$ = action$.pipe(ofType(UPDATE), map(creditCardService.validate));

  const status$ = action$.pipe(
    ofType(actions.PAY),
    exhaustMap(({ values }) => {
      from(creditCardService.pay(values)).pipe(
        mapTo({ status: 'success' }),
        catchError(error => of({ message: error.message }))
      );
    })
  );

  return combineLatest(values$, errors$, status$, (values, errors, status) => ({
    values,
    errors,
    status
  }));
};

class creditCardService {
  construtor({ apiUrl }) {
    this.apiUrl = apiUrl;
  }

  async pay(data) {
    const response = await fetch(this.apiUrl, { body: JSON.stringify(data) });
    return response.data;
  }
  
  async validate(ccData) {
    await checkValidNumber(ccData);
    checkIsExpired(ccData);
  }
};