import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { SH4 } from '../../common/s-components/typography/s-h4';
import { Flag } from '../../common/components/flag';
import { setStartingMarket } from '../transducers';
import { TMarket } from '../../common/types';
import { TUserData } from '../../auth/types';

type TProps = {
  markets: TMarket[];
  userData: TUserData;
  width: number;
};

export const LocationSettings: React.FC<TProps> = memo(props => {
  const { markets, userData, width } = props;
  const { code: marketCode, name: marketName } = setStartingMarket(
    markets,
    userData
  );

  return (
    <SBox alignItems="center" justifyContent="center" flex={1} mt={-73}>
      <SBox
        pt={24}
        pb={22}
        width={width}
        bg="fiord"
        alignItems="center"
        borderRadius={8}
      >
        <SH6 lineHeight="13px" pb={11}>
          Your location is set to
        </SH6>
        <Flag market={marketCode} variant="light" />
        <SH3 lineHeight="24px" pt={10}>
          {marketName}
        </SH3>
      </SBox>
      <SBox mt={17}>
        <SH4 normal lineHeight="20px" color="periwinkleGray">
          You can change this in the profile settings.
        </SH4>
      </SBox>
    </SBox>
  );
});