import React from 'react'
import { Paragraph, Text } from 'components/Typography'
import { Form, Select } from 'antd'
import { selectLocalizations } from 'redux/User/selector'
import { useTypedSelector } from 'redux/rootReducer'
import { LocalizationItem as LocalizationItemType } from 'redux/User/types'

const { Option } = Select
interface IProps {
  onChangePageCopy: (value: string) => void
  pageCopy: string | null
}

const SecondStep = ({ onChangePageCopy, pageCopy }: IProps) => {
  const localizations = useTypedSelector(selectLocalizations)

  return (
    <div className="localization-create-form">
      <div className="step-info">
        <Paragraph preset="regular14" className="opacity--80">
          You are about to add a new localized page. Your page will remain
          inactive and will not be displayed in the countries selected until you
          publish it.
        </Paragraph>
      </div>
      <div className="m__t--16">
        <Text className="" preset="semibold18">
          Copy Modules From an Existing Page
        </Text>
      </div>
      <Paragraph preset="regular16" className="m__t--4 m__b--16 opacity--80">
        Select one of your existing pages below and all the modules will be
        duplicated from the selected page onto the new one.
      </Paragraph>

      <Form.Item label="Select page" name="copyFrom">
        <Select
          defaultValue="None"
          dropdownClassName="localization-dropdown-menu fixed-width"
          placement="bottomRight"
          onChange={onChangePageCopy}
          value={pageCopy || 'None'}
        >
          <Option value="">None</Option>
          <Option value="default">Default</Option>
          {localizations?.map((localization: LocalizationItemType, i) => (
            <Option key={i} value={localization.id || ''}>
              {localization.name}
            </Option>
          ))}
        </Select>
      </Form.Item>
    </div>
  )
}

export default SecondStep
