import React from 'react';
import MD from 'react-markdown';
import { IntlProvider } from 'react-intl';
import { Number, Typography } from '../..';
import docs from './Number.md';
import { Display } from '../../common/Display';
import { TYPOGRAPHY_TYPES } from '../../Atoms/Typography/Typography';
export default {
  title: 'Molecules / Number',
  parameters: {
    component: Number
  }
};
export var Documentation = function Documentation() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Typography, null, React.createElement(MD, null, docs), React.createElement("div", null, React.createElement(Number, {
    value: 1000000
  })), React.createElement("div", null, React.createElement(Number, {
    value: 3400,
    currency: "SEK"
  }))));
};
export var Default = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'value = 1000',
        component: React.createElement(Number, {
          value: 1000
        })
      }, {
        title: 'value = 9000000',
        component: React.createElement(Number, {
          value: 9000000
        })
      }, {
        title: 'value = 0.01',
        component: React.createElement(Number, {
          value: 0.01
        })
      }, {
        title: 'value = 111.2',
        component: React.createElement(Number, {
          value: 111.2
        })
      }]
    }));
  }
};
export var NumberWith2Decimals = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'value = 10.378',
        component: React.createElement(Number, {
          value: 10.378,
          decimals: 2
        })
      }, {
        title: 'value = 10.333',
        component: React.createElement(Number, {
          value: 10.333,
          decimals: 2
        })
      }, {
        title: 'value = 10',
        component: React.createElement(Number, {
          value: 10,
          decimals: 2
        })
      }, {
        title: 'value = 10.5',
        component: React.createElement(Number, {
          value: 10.5,
          decimals: 2
        })
      }]
    }));
  }
};
export var NumberWithMinMaxDigits = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Number, {
      value: 10.378,
      maximumDecimals: 2
    }), React.createElement(Number, {
      value: 10.1,
      minimumDecimals: 2
    }), React.createElement(Number, {
      value: 10.333,
      minimumDecimals: 2,
      maximumDecimals: 4
    }), React.createElement(Number, {
      value: 10.1,
      minimumDecimals: 2,
      maximumDecimals: 4
    }), React.createElement(Number, {
      value: 10.66666,
      minimumDecimals: 2,
      maximumDecimals: 4
    }), React.createElement(Number, {
      value: 10,
      minimumDecimals: 2,
      maximumDecimals: 4
    }));
  },
  name: 'Number with min/max digits'
};
export var NumberTicks = {
  render: function render() {
    var ticks = [{
      decimals: 4,
      fromPrice: 0,
      toPrice: 0.9999,
      tick: 0.0001
    }, {
      decimals: 2,
      fromPrice: 1,
      toPrice: 99999.98,
      tick: 0.01
    }, {
      decimals: 1,
      fromPrice: 100000,
      toPrice: 999999.89,
      tick: 0.1
    }];
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement("pre", null, "ticks = ".concat(JSON.stringify(ticks, null, 2))), React.createElement(Display, {
      items: [{
        title: 'value = 0.55555',
        component: React.createElement(Number, {
          value: 0.55555,
          ticks: ticks
        })
      }, {
        title: 'value = 10.333',
        component: React.createElement(Number, {
          value: 10.333,
          ticks: ticks
        })
      }, {
        title: 'value = 10.5',
        component: React.createElement(Number, {
          value: 10.5,
          ticks: ticks
        })
      }, {
        title: 'value = 100001.22',
        component: React.createElement(Number, {
          value: 100001.22,
          ticks: ticks
        })
      }]
    }));
  }
};
export var NumberWithPercentage = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Number, {
      value: 2.3,
      percentage: true
    }));
  }
};
export var NumberWithCurrency = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Number, {
      value: 2.3,
      currency: "SEK"
    }));
  }
};
export var NumberWithCurrencyAsDifferentSize = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Typography, {
      type: "title2",
      as: "div"
    }, React.createElement(Number, {
      value: 2.3,
      currency: "SEK",
      currencySize: "title3"
    })), React.createElement(Typography, {
      type: "primary",
      weight: "bold",
      as: "div"
    }, React.createElement(Number, {
      value: 2.3,
      currency: "SEK",
      currencySize: "secondary"
    })));
  }
};
export var NumberWithSign = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'value = 2',
        component: React.createElement(Number, {
          value: 2,
          sign: true
        })
      }, {
        title: 'value = 0',
        component: React.createElement(Number, {
          value: 0,
          sign: true
        })
      }, {
        title: 'value = -1',
        component: React.createElement(Number, {
          value: -1,
          sign: true
        })
      }]
    }));
  }
};
export var InvalidValue = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Number, {
      value: null
    }));
  }
};
export var MaskValue = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'maskValue',
        component: React.createElement(Number, {
          value: 9999,
          sign: true,
          maskValue: true
        })
      }, {
        title: 'maskValue with currency',
        component: React.createElement(Number, {
          value: 9999,
          maskValue: true,
          currency: "SEK"
        })
      }]
    }));
  },
  name: 'Number with masked value'
};
export var NullCurrency = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Number, {
      value: 10,
      currency: null
    }));
  }
};
export var RegressionValueIsPositiveButRoundedValueIs0 = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'value = 0.1',
        component: React.createElement(Number, {
          value: 0.1,
          sign: true,
          decimals: 0
        })
      }]
    }));
  },
  name: 'Regression: value is positive, but rounded value is 0'
};
export var Regression0ShouldBe0 = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(React.Fragment, null, React.createElement(Display, {
      items: [{
        title: 'value = 0.1',
        component: React.createElement(Number, {
          value: -0.1,
          sign: true,
          decimals: 0
        })
      }]
    }), React.createElement(Display, {
      items: [{
        title: 'value = 0.1',
        component: React.createElement(Number, {
          value: -0.1,
          sign: true,
          decimals: 0
        })
      }]
    })));
  },
  name: 'Regression: -0 should be 0'
};
export var IntegrationWithDifferentTypographies = {
  render: function render() {
    var _Object$values;
    var items = (_Object$values = Object.values(TYPOGRAPHY_TYPES)) === null || _Object$values === void 0 ? void 0 : _Object$values.map(function (type) {
      return {
        title: type,
        component: React.createElement(Typography, {
          type: type
        }, React.createElement(Display, {
          items: [{
            title: 'value = 1000',
            component: React.createElement(Number, {
              value: 1000
            })
          }, {
            title: 'value = 9000000',
            component: React.createElement(Number, {
              value: 9000000
            })
          }, {
            title: 'value = 0.01',
            component: React.createElement(Number, {
              value: 0.01
            })
          }, {
            title: 'value = 111.2',
            component: React.createElement(Number, {
              value: 111.2
            })
          }]
        }))
      };
    });
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: items
    }));
  },
  name: 'Integration: with different typographies'
};