import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { withKnobs, array, text, select, boolean, object } from '@storybook/addon-knobs';
import buttonOptions from '../../atoms/buttons/Button/Button.knobs.options';
import GenTeaser from './index';
import GenTeaserDocs from './GenTeaser.md';
import { Icon } from '../../../index';

storiesOf('organisms/GenTeaser', module).addDecorator(withKnobs({ escapeHTML: false })).add('GenTeaser as Basic', function () {
  var basic = {
    title: {
      info: text('title: info', 'Title info here', 'GenTeaser.Title'),
      text: text('title: text', 'Basic Search Result', 'GenTeaser.Title'),
      href: text('title: href', '#', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    description: text('description', 'A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in <b>writing dealing with a particular</b> point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.', 'GenTeaser.Description')
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: basic.title }),
      React.createElement(GenTeaser.Description, { description: basic.description })
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as DataCatalog', function () {
  var dataCatalog = {
    title: {
      info: text('title: info', 'Title info here', 'GenTeaser.Title'),
      text: text('title: text', 'School and District Profiles', 'GenTeaser.Title'),
      href: text('title: href', 'http://profiles.doe.mass.edu/', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    description: text('description', 'The Massachusetts Department of Early and Seconday Education\'s school and district profile exploration tool.', 'GenTeaser.Description'),
    subLinks: object('subLinks', [{
      text: 'Teacher Salaries Report',
      href: 'http://profiles.doe.mass.edu/statereport/teachersalaries.aspx',
      description: 'Total teaching salaries, divided by the number of full-time equivalent teachers, equals the average teacher salary.'
    }, {
      text: 'MCAS Achievement Results',
      href: 'http://profiles.doe.mass.edu/statereport/mcas.aspx',
      description: 'This report contains results for legacy MCAS only.'
    }, {
      text: 'Next Generation MCAS Achievement Results',
      href: 'http://profiles.doe.mass.edu/statereport/nextgenmcas.aspx',
      description: 'This report contains results for Next Generation MCAS only.'
    }, {
      text: 'Per Pupil Expenditures',
      href: 'http://profiles.doe.mass.edu/statereport/ppx.aspx',
      description: "Per pupil expenditures are calculated by dividing a district's operating costs by its average pupil membership (FTEs), including in-district expenditures per pupil and total expenditures per pupil, which includes in-district and out-of-district spending and enrollment."
    }], 'GenTeaser.SubLinks'),
    date: text('date', '01/01/2019', 'GenTeaser.Date'),
    orgs: text('orgs', 'Massachusetts Department of Early and Seconday Education', 'GenTeaser.Orgs'),
    search: {
      placeholder: text('search: placeholder', 'search profiles.doe.mass.edu...', 'GenTeaser.Search'),
      target: text('search: target', 'http://profiles.doe.mass.edu/search/search_new.aspx?leftNavId=11241', 'GenTeaser.Search'),
      queryInput: text('search: queryInput', '', 'GenTeaser.Search'),
      id: text('search: id', 'jahdfjadh', 'GenTeaser.Search')
    },
    stat: text('stat', React.createElement(
      'span',
      null,
      'Total Items: ',
      React.createElement(
        'b',
        null,
        '143'
      )
    ), 'GenTeaser.Stat'),
    eyebrow: text('eyebrow', React.createElement(
      'span',
      null,
      React.createElement(Icon, { name: 'catalog', svgWidth: 16, svgHeight: 16 }),
      ' Data Catalog'
    ), 'GenTeaser.Eyebrow')
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(
        GenTeaser.Stat,
        null,
        dataCatalog.stat
      ),
      React.createElement(GenTeaser.Eyebrow, { eyebrow: dataCatalog.eyebrow }),
      React.createElement(GenTeaser.Title, { title: dataCatalog.title }),
      React.createElement(
        GenTeaser.Emphasis,
        null,
        React.createElement(GenTeaser.Date, { date: dataCatalog.date }),
        React.createElement(GenTeaser.Orgs, { orgs: dataCatalog.orgs })
      ),
      React.createElement(GenTeaser.Description, { description: dataCatalog.description }),
      React.createElement(GenTeaser.SearchBar, { search: dataCatalog.search }),
      React.createElement(
        GenTeaser.SubLinks,
        null,
        dataCatalog.subLinks.map(function (item) {
          return React.createElement(GenTeaser.KeyAction, item);
        })
      )
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as Dataset', function () {
  var dataset = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'Deer harvest data', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/service-details/deer-harvest-data', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    description: text('description', 'Review the recent white-tailed deer harvest data before heading out to hunt. Though Massachusetts is the 3rd most densely populated state in the country, it is a state where quality deer can be found anywhere. MassWildlife biologists estimate that there are over 100,000 deer statewide. Estimated densities range from about 12-18 per square mile in western and central Massachusetts to over 50 deer per square mile on Martha\'s Vineyard and Nantucket Islands, and certain areas of eastern MA where hunting access is restricted.', 'GenTeaser.Description'),
    eyebrow: text('eyebrow', React.createElement(
      'span',
      null,
      React.createElement(Icon, { name: 'data', svgWidth: 16, svgHeight: 16 }),
      ' Dataset'
    ), 'GenTeaser.Eyebrow'),
    date: text('date', '01/01/2019', 'GenTeaser.Date'),
    orgs: text('orgs', 'Division of Fisheries and Wildlife, Executive Office of Energy and Environmental Affairs', 'GenTeaser.Orgs'),
    tags: array('tags', ['kml', 'xls', 'json', 'csv'], ',', 'GenTeaser.Tags'),
    button: {
      text: text('button: text', 'Show Details', 'GenTeaser.Button'),
      usage: select('button: usage', buttonOptions.usage, 'secondary', 'GenTeaser.Button'),
      theme: select('button: theme', buttonOptions.theme, 'c-primary', 'GenTeaser.Button')
    }
  };
  return React.createElement(
    GenTeaser,
    { onClick: function onClick(e) {
        return action(e);
      }, onKeyDown: function onKeyDown(e) {
        return action(e);
      } },
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Eyebrow, { eyebrow: dataset.eyebrow }),
      React.createElement(GenTeaser.Button, { button: dataset.button }),
      React.createElement(GenTeaser.Title, { title: dataset.title }),
      React.createElement(
        GenTeaser.Emphasis,
        null,
        React.createElement(GenTeaser.Date, { date: dataset.date }),
        React.createElement(GenTeaser.Orgs, { orgs: dataset.orgs })
      ),
      React.createElement(GenTeaser.Description, { description: dataset.description }),
      React.createElement(GenTeaser.Tags, { tags: dataset.tags })
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as Data Download', function () {
  var dataDownload = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', '2015 Monthly Electric Customer Migration Data', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/files/documents/2018/06/15/2015%20Annual%20Electric%20Monthly%20Migration-Complete.xlxs', 'GenTeaser.Title'),
      icon: 'download',
      showFileIcon: boolean('title: showFileIcon', true, 'GenTeaser.Title'),
      details: '(30 MB)'
    },
    description: text('description', 'Jun 15, 2018 <b>...</b> <b>Annual Electric</b>. <b>Migration</b>. 2,015,302. 18,322,632,032. 758,696 .... <b>Monthly</b>  Competitive Supply Load Served (2015). State. Lg C &amp; I. Med C &amp; I.', 'GenTeaser.Description'),
    date: text('date', 'Updated on 9/06/2019', 'GenTeaser.Date'),
    orgs: text('orgs', 'Department of Public Health, Executive Office of Health and Human Services', 'GenTeaser.Orgs')
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: dataDownload.title }),
      React.createElement(
        GenTeaser.Emphasis,
        null,
        React.createElement(GenTeaser.Date, { date: dataDownload.date }),
        React.createElement(GenTeaser.Orgs, { orgs: dataDownload.orgs })
      ),
      React.createElement(GenTeaser.Description, { description: dataDownload.description })
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as News', function () {
  var news = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'State public health officials announce two new confirmed human cases of EEE', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/news/state-public-health-officials-announce-two-new-confirmed-human-cases-of-eee', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    eyebrow: text('eyebrow', 'Press Release', 'GenTeaser.Eyebrow'),
    description: text('description', 'The Massachusetts Department of Public Health (DPH) today announced that laboratory testing has confirmed two new cases of Eastern ...', 'GenTeaser.Description'),
    date: text('date', '9/06/2019', 'GenTeaser.Date'),
    orgs: text('orgs', 'Bureau of Substance Addiction Services, Department of Mental Health, Department of Public Health, Executive Office of Health and Human Services', 'GenTeaser.Orgs')
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Eyebrow, { eyebrow: news.eyebrow }),
      React.createElement(GenTeaser.Title, { title: news.title }),
      React.createElement(
        GenTeaser.Emphasis,
        null,
        React.createElement(GenTeaser.Date, { date: news.date }),
        React.createElement(GenTeaser.Orgs, { orgs: news.orgs })
      ),
      React.createElement(GenTeaser.Description, { description: news.description })
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser  as Laws and Regs', function () {
  var regulation = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', '101 CMR 350.00: Home Health Services', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/regulations/101-CMR-35000-home-health-services', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    eyebrow: text('eyebrow', 'Regulation', 'GenTeaser.Eyebrow'),
    description: text('description', 'This is an unofficial version of Commonwealth regulations and is posted here for the convenience of the public. It is not an official statement of the regulations.', 'GenTeaser.Description'),
    date: text('date', '7/12/2019', 'GenTeaser.Date'),
    orgs: text('orgs', 'Executive Office of Health and Human Services', 'GenTeaser.Orgs')
  };
  var law = {
    title: {
      info: 'This is the info',
      text: 'General Law - Part I, Title XV, Chapter 93, Section 78',
      href: 'https://malegislature.gov/Laws/GeneralLaws/PartI/TitleXV/Chapter93/Section78',
      showFileIcon: false
    },
    eyebrow: 'General Law',
    description: "''Contract for health club services'', a contract which has the primary purpose of providing a person with the right to use the facilities of a health club or with ..",
    date: '7/13/2019',
    orgs: 'Massachusetts Legislature',
    subLinks: [{
      text: 'Search Sections within this Chapter',
      href: 'http://malegislature.gov/Laws/GeneralLaws/PartI/TitleXV/Chapter93'
    }, {
      text: 'Search for General Laws',
      href: 'http://malegislature.gov/Laws/GeneralLaws'
    }]
  };
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      GenTeaser,
      null,
      React.createElement(
        GenTeaser.Details,
        null,
        React.createElement(GenTeaser.Eyebrow, { eyebrow: regulation.eyebrow }),
        React.createElement(GenTeaser.Title, { title: regulation.title }),
        React.createElement(
          GenTeaser.Emphasis,
          null,
          React.createElement(GenTeaser.Date, { date: regulation.date }),
          React.createElement(GenTeaser.Orgs, { orgs: regulation.orgs })
        ),
        React.createElement(GenTeaser.Description, { description: regulation.description })
      )
    ),
    React.createElement(
      GenTeaser,
      null,
      React.createElement(
        GenTeaser.Details,
        null,
        React.createElement(GenTeaser.Eyebrow, { eyebrow: law.eyebrow }),
        React.createElement(GenTeaser.Title, { title: law.title }),
        React.createElement(
          GenTeaser.Emphasis,
          null,
          React.createElement(GenTeaser.Date, { date: law.date }),
          React.createElement(GenTeaser.Orgs, { orgs: law.orgs })
        ),
        React.createElement(GenTeaser.Description, { description: law.description }),
        React.createElement(
          GenTeaser.SubLinks,
          null,
          law.subLinks.map(function (item) {
            return React.createElement(GenTeaser.KeyAction, item);
          })
        )
      )
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as Services', function () {
  var service = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'SNAP outreach', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/snap-outreach', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    eyebrow: text('eyebrow', 'General Law', 'GenTeaser.Eyebrow'),
    description: text('description', 'If you are a client, you can get help with you SNAP case and benefits through a SNAP outreach partner. You can find SNAP outreach ... Contact Information ...', 'GenTeaser.Description'),
    subLinks: object('subLinks', [{
      text: 'Apply for SNAP benefits (food stamps)',
      href: 'https://www.mass.gov/how-to/apply-for-snap-benefits-food-stamps'
    }, {
      text: 'Snap Outreach For Partners',
      href: 'https://www.mass.gov/service-details/snap-outreach-for-partners'
    }], 'GenTeaser.SubLinks')
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: service.title }),
      React.createElement(GenTeaser.Description, { description: service.description }),
      React.createElement(
        GenTeaser.SubLinks,
        null,
        service.subLinks.map(function (link) {
          return React.createElement(GenTeaser.KeyAction, link);
        })
      )
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser (State Org)', function () {
  var stateOrg = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'MassHire Department of Career Services', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/orgs/masshire-department-of-career-services', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    description: text('description', 'The MassHire Department of Career Services provides job seekers with a variety of job assistance services, ... How to Access State Jobs - Information Session.', 'GenTeaser.Description'),
    phone: {
      number: text('phone: number', '6176265300', 'GenTeaser.PrimaryInfo'),
      details: text('phone: details', '8:30 a.m. - 4:30 p.m. weekdays', 'GenTeaser.PrimaryInfo')
    },
    email: {
      email: text('email', 'DCSFeedback@MassMail.State.MA.US', 'GenTeaser.SecondaryInfo')
    },
    locations: {
      icon: text('locations: icon', 'marker', 'GenTeaser.PrimaryInfo'),
      href: text('locations: href', 'https://www.mass.gov/orgs/masshire-department-of-career-services/locations', 'GenTeaser.PrimaryInfo'),
      text: text('locations: text', 'MassHire Department of Career Services Locations', 'GenTeaser.PrimaryInfo')
    },
    infodetails: {
      icon: text('infodetails: icon', 'laptop', 'GenTeaser.SecondaryInfo'),
      text: text('infodetails: text', 'Find a job with MassHire JobQuest', 'GenTeaser.SecondaryInfo'),
      href: text('infodetails: href', 'https://jobquest.detma.org/jobquest/Default.aspx', 'GenTeaser.SecondaryInfo')
    }
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: stateOrg.title }),
      React.createElement(GenTeaser.Description, { description: stateOrg.description }),
      React.createElement(
        GenTeaser.MoreInfo,
        null,
        React.createElement(
          GenTeaser.PrimaryInfo,
          null,
          React.createElement(GenTeaser.Phone, stateOrg.phone),
          React.createElement(GenTeaser.InfoDetails, stateOrg.locations)
        ),
        React.createElement(
          GenTeaser.SecondaryInfo,
          null,
          React.createElement(GenTeaser.Email, stateOrg.email),
          React.createElement(GenTeaser.InfoDetails, stateOrg.infodetails)
        )
      )
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as Location', function () {
  var location = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'Haverhill RMV Service Center', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/locations/haverhill-rmv-service-center', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    description: text('description', 'Aug 29, 2019 ... 229c Lincoln Avenue, Haverhill, MA 01830. directions · Start your application online See and compare wait times at RMV Service Centers in ...', 'GenTeaser.Description'),
    address: {
      address: text('address: address', '229c Lincoln Avenue<br>Haverhill, MA 01830<br>United States', 'GenTeaser.PrimaryInfo'),
      directionLink: text('address: directionLink', 'https://maps.google.com/?q=229c+Lincoln+Avenue%2C+Haverhill%2C+MA+01830', 'GenTeaser.PrimaryInfo'),
      details: text('address: details', 'details', 'Monday - Friday: 9:00 am-5:00 pm', 'GenTeaser.PrimaryInfo')
    }
  };

  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: location.title }),
      React.createElement(GenTeaser.Description, { description: location.description }),
      React.createElement(
        GenTeaser.MoreInfo,
        null,
        React.createElement(
          GenTeaser.PrimaryInfo,
          null,
          React.createElement(GenTeaser.Address, location.address)
        )
      )
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser as Event', function () {
  var startTime = new Date(2019, 7, 12, 13, 0, 0);
  var endTime = new Date(2019, 7, 17, 16, 0, 0);
  var event = {
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'Job Fair 2019', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/locations/haverhill-rmv-service-center', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    orgs: text('orgs', 'MassHire Department of Career Services', 'GenTeaser.Orgs'),
    description: text('description', 'Jul 17, 2019 ... offered by. MassHire Department of Career Services. show 0 more. related to. MassHire Plymouth Career Center · MassHire ... Job Fair 2019.', 'GenTeaser.Description'),
    address: {
      address: text('address: address', 'Kingston Collection 101 Kingston Collection Way<br>Kingston MA 02364', 'GenTeaser.PrimaryInfo'),
      directionLink: text('address: directionLink', 'https://maps.google.com/?q=Kingston+Collection+101+Kingston+Collection+Way+Kingston+MA+02364', 'GenTeaser.PrimaryInfo'),
      details: text('address: details', 'details', '', 'GenTeaser.PrimaryInfo')
    },
    event: {
      startDate: startTime,
      endDate: endTime,
      details: text('details', 'First come first serve.'),
      location: '324-R Clark Street, Worcester MA 01606',
      description: 'Go to this link https://www.mass.gov/',
      title: 'Title here',
      calendars: [{
        text: 'iCal or Outlook',
        type: 'outlook'
      }, {
        text: 'Yahoo Calendar',
        type: 'yahoo'
      }, {
        text: 'Google Calendar',
        type: 'google'
      }]
    }
  };
  return React.createElement(
    GenTeaser,
    null,
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: event.title }),
      React.createElement(
        GenTeaser.Emphasis,
        null,
        React.createElement(GenTeaser.Orgs, { orgs: event.orgs })
      ),
      React.createElement(GenTeaser.Description, { description: event.description }),
      React.createElement(
        GenTeaser.MoreInfo,
        null,
        React.createElement(
          GenTeaser.PrimaryInfo,
          null,
          React.createElement(GenTeaser.Event, event.event)
        ),
        React.createElement(
          GenTeaser.SecondaryInfo,
          null,
          React.createElement(GenTeaser.Address, event.address)
        )
      )
    )
  );
}, { info: GenTeaserDocs }).add('GenTeaser with Image', function () {
  var teaser = {
    stacked: boolean('image: stacked', false),
    align: select('image: align', ['top', 'center'], 'top'),
    title: {
      info: text('title: info', 'This is the info', 'GenTeaser.Title'),
      text: text('title: text', 'Job Fair 2019', 'GenTeaser.Title'),
      href: text('title: href', 'https://www.mass.gov/locations/haverhill-rmv-service-center', 'GenTeaser.Title'),
      showFileIcon: boolean('title: showFileIcon', false, 'GenTeaser.Title')
    },
    description: text('description', 'Jul 17, 2019 ... offered by. MassHire Department of Career Services. show 0 more. related to. MassHire Plymouth Career Center · MassHire ... Job Fair 2019.', 'GenTeaser.Description'),
    img: {
      src: 'https://via.placeholder.com/150',
      alt: '',
      shape: 'circular'
    }
  };
  return React.createElement(
    GenTeaser,
    { stacked: teaser.stacked, align: teaser.align },
    React.createElement(GenTeaser.Image, { img: teaser.img }),
    React.createElement(
      GenTeaser.Details,
      null,
      React.createElement(GenTeaser.Title, { title: teaser.title }),
      React.createElement(GenTeaser.Description, { description: teaser.description })
    )
  );
}, { info: GenTeaserDocs });