import React from 'react';
import MD from 'react-markdown';
import { IntlProvider } from 'react-intl';
import docs from './Development.md';
import { Development, Typography } from '../../index';
import { Display } from '../../common/Display';
import { TYPOGRAPHY_TYPES } from '../../Atoms/Typography/Typography';
export default {
  title: 'Organisms / Development'
};
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(Development, {
    value: 50,
    currency: "SEK"
  })), React.createElement("div", null, React.createElement(Development, {
    value: 0,
    percentage: true
  })), React.createElement("div", null, React.createElement(Development, {
    value: -2.3,
    percentage: true
  }))));
};
export var Default = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'Positive value',
        component: React.createElement(Development, {
          value: 50
        })
      }, {
        title: 'Zero value',
        component: React.createElement(Development, {
          value: 0
        })
      }, {
        title: 'Negative value',
        component: React.createElement(Development, {
          value: -200
        })
      }]
    }));
  }
};
export var WithIcon = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'Positive value',
        component: React.createElement(Development, {
          value: 50,
          icon: true
        })
      }, {
        title: 'Zero value',
        component: React.createElement(Development, {
          value: 0,
          icon: true
        })
      }, {
        title: 'Negative value',
        component: React.createElement(Development, {
          value: -200,
          icon: true
        })
      }]
    }));
  }
};
export var AsPercentage = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'Positive value',
        component: React.createElement(Development, {
          value: 5.4,
          percentage: true
        })
      }, {
        title: 'Zero value',
        component: React.createElement(Development, {
          value: 0,
          percentage: true
        })
      }, {
        title: 'Negative value',
        component: React.createElement(Development, {
          value: -2.1,
          percentage: true
        })
      }]
    }));
  }
};
export var AsCurrency = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'Positive value',
        component: React.createElement(Development, {
          value: 50,
          currency: "USD"
        })
      }, {
        title: 'Zero value',
        component: React.createElement(Development, {
          value: 0,
          currency: "USD"
        })
      }, {
        title: 'Negative value',
        component: React.createElement(Development, {
          value: -200,
          currency: "USD"
        })
      }]
    }));
  }
};
export var WithDifferentColors = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: 'Positive value',
        component: React.createElement(Development, {
          value: 50,
          positiveColor: function positiveColor(c) {
            return c.color.positive;
          }
        })
      }, {
        title: 'Zero value',
        component: React.createElement(Development, {
          value: 0
        })
      }, {
        title: 'Negative value',
        component: React.createElement(Development, {
          value: -200,
          negativeColor: function negativeColor(c) {
            return c.color.negative;
          }
        })
      }]
    }));
  }
};
export var RegressionInfinity = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: '+Infinity',
        component: React.createElement(Development, {
          value: Infinity
        })
      }, {
        title: '-Infinity',
        component: React.createElement(Development, {
          value: -Infinity
        })
      }]
    }));
  },
  name: 'Regression: infinity'
};
export var RegressionValueIsNonZeroButRoundedValueIs0 = {
  render: function render() {
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: [{
        title: '`value = 0.3` and decimals = 0',
        component: React.createElement(Development, {
          value: 0.3,
          decimals: 0
        })
      }, {
        title: '`value = -0.3 and decimals = 0`',
        component: React.createElement(Development, {
          value: -0.3,
          decimals: 0
        })
      }, {
        title: '`value = -1.3123 and decimals = 3`',
        component: React.createElement(Development, {
          value: -1.3123,
          decimals: 3
        })
      }, {
        title: '`value = -0.3 and maximumDecimals = 0`',
        component: React.createElement(Development, {
          value: -0.3,
          maximumDecimals: 0
        })
      }, {
        title: '`value = 0.3`',
        component: React.createElement(Development, {
          value: +0.3,
          ticks: [{
            fromPrice: 0,
            toPrice: 1000,
            decimals: 0,
            tick: 1
          }]
        })
      }]
    }));
  },
  name: 'Regression: value is non-zero, but rounded value is 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: 'Positive value',
            component: React.createElement(Development, {
              value: 5.4
            })
          }, {
            title: 'Zero value',
            component: React.createElement(Development, {
              value: 0
            })
          }, {
            title: 'Negative value',
            component: React.createElement(Development, {
              value: -2.1
            })
          }]
        }))
      };
    });
    return React.createElement(IntlProvider, {
      locale: "en"
    }, React.createElement(Display, {
      items: items
    }));
  },
  name: 'Integration: with different typographies'
};