import React from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import Background from '../component/background';
import { Header, Title } from '../component/header';
import { Button, BackButton, RadioButton } from '../component/button';
import { SettingContent, SettingList, SettingItem } from '../component/setting';
import { color } from '../component/style';

//
// Setting Fiat View
//

const SettingFiatView = ({ store, nav, setting }) => {
  return (
    <Background color={color.blackDark}>
      <Header separator>
        <BackButton onPress={() => nav.goSettings()} />
        <Title title="Fiat Currency" />
        <Button disabled onPress={() => {}} />
      </Header>
      <SettingContent>
        <SettingList>
          <SettingItem
            name={store.kshFiatLabel}
            onSelect={() => setting.setFiatCurrency({ fiat: 'ksh' })}
          >
            <RadioButton selected={'ksh' === store.settings.fiat} />
          </SettingItem>
          <SettingItem
            name={store.ushFiatLabel}
            onSelect={() => setting.setFiatCurrency({ fiat: 'ush' })}
          >
            <RadioButton selected={'ush' === store.settings.fiat} />
          </SettingItem>
          <SettingItem
            name={store.tshFiatLabel}
            onSelect={() => setting.setFiatCurrency({ fiat: 'tsh' })}
          >
            <RadioButton selected={'tsh' === store.settings.fiat} />
          </SettingItem>
          <SettingItem
            name={store.usdFiatLabel}
            onSelect={() => setting.setFiatCurrency({ fiat: 'usd' })}
          >
            <RadioButton selected={'usd' === store.settings.fiat} />
          </SettingItem>
        </SettingList>
      </SettingContent>
    </Background>
  );
};

SettingFiatView.propTypes = {
  store: PropTypes.object.isRequired,
  setting: PropTypes.object.isRequired,
  nav: PropTypes.object.isRequired,
};

export default observer(SettingFiatView);
