/**
 * @format
 */
import React from 'react'
import {ComponentStory, ComponentMeta} from '@storybook/react'
import '../styles/fonts.css'

import {TransactionMapView} from '../components/TransactionMapView'
import {Provider} from 'react-redux'
import {store} from '../store'
import {TransactionMapInterface} from '../types/types'
export default {
  title: 'VantagePlus/TransactionMap',
  component: TransactionMapView
} as ComponentMeta<typeof TransactionMapView>

const mockMarker: Array<TransactionMapInterface> = [
  {
    transactionPrice: 12344,
    date: '07-SEP-2021',
    pricePSF: 123,
    address: '1A-8-8, JALAN KERINCHI KIRI 2, SOUTH-VIEW RESIDENCE',
    type: 'primary',
    position: {lat: -34.261, lng: 150.139}
  },
  {
    transactionPrice: 12344,
    date: '05-SEP-2021',
    pricePSF: 123,
    address: '2A-8-8, JALAN KERINCHI KIRI 2, SOUTH-VIEW RESIDENCE',
    type: 'secondary',
    position: {lat: -34.263, lng: 150.144}
  },
  {
    transactionPrice: 12314,
    date: '01-SEP-2021',
    pricePSF: 123,
    address: '3A-8-8, JALAN KERINCHI KIRI 2, SOUTH-VIEW RESIDENCE',
    type: 'secondary',
    position: {lat: -34.315, lng: 150.241}
  },
  {
    transactionPrice: 12344,
    date: '03-SEP-2021',
    pricePSF: 123,
    address: '4A-8-8, JALAN KERINCHI KIRI 2, SOUTH-VIEW RESIDENCE',
    type: 'secondary',
    position: {lat: -34.262, lng: 150.299}
  },
  {
    transactionPrice: 12344,
    date: '09-SEP-2021',
    pricePSF: 123,
    address: '5A-8-8, JALAN KERINCHI KIRI 2, SOUTH-VIEW RESIDENCE',
    type: 'secondary',
    position: {lat: -34.365, lng: 150.046}
  }
]
const Template: ComponentStory<typeof TransactionMapView> = args => (
  <Provider store={store}>
    <TransactionMapView {...args} />
  </Provider>
)

export const TransactionMap = Template.bind({})
TransactionMap.args = {
  data: mockMarker
}